Change navigations font size? It looks like I will need to play with the css..t
Hi. How do I change the navigation's font size for theme skyline downtown? If I need to change the CSS what am I looking for? Menu font-size? Even having trouble figuring out which file is the correct CSS file to work with.. Any help would be appreciated.
-
Lisa commented
Thank you for your help Sergey!
-
Sergey O. commented
If you wish to deeply customize the website appearance, you will need to turn Theme Override feature on and then download original theme files, modify CSS files, upload it back and rebuild theme as described in this tutorial: as described at this page: http://help.wildapricot.com/display/DOC/Theme+overrides
But I guess you have already done this step.The CSS (actually, LESS) file that is responsible for Horizontal menu behavior is located at the following path: Gadgets\Menu.Horizontal\gadget.menu.horizontal.less
-
Lisa commented
I found some files I think, but still can't find the lines I am looking for. For example looking to play with removing the dot after menu items that have children. Or to be able to play with the padding between menu items, etc.
Thank you again.
-
Lisa commented
Hi Sergey. Thank you so much! I will try that tonight.
I had read through all of the css help items (I think) but my biggest challenge was that I was not able to find the current css in order to figure out what to reference - for example ".WaGadgetMenuHorizontal .menuInner ul.firstLevel". There are definitely additional customizations I would like to play with for the nav. Would you also be able to tell me which file holds the original css, and where it is located, so I can figure out what to reference additional items such a the rule, etc ? Again thanks so much for your help. I appreciate how quickly you have responded.
-
Sergey O. commented
Sorry, I've gave you code that affects both vertical and horizontal menus.
Here is the one that affects only Horizontal menu:
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a,
.WaGadgetMenuHorizontal .menuInner ul ul > li > .item > a
{
font-size: 14px;
} -
Sergey O. commented
Please try using CSS customization in order to change the font size of first and second level menu in horizontal menu:
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a,
.WaGadgetMenuVertical .menuInner ul.firstLevel > li > .item > a,
.WaGadgetMenuHorizontal .menuInner ul ul > li > .item > a,
.WaGadgetMenuVertical .menuInner ul ul > li > .item > a
{
font-size: 14px;
}You may change the font-size property up to you.
To learn how to enter CSS customization code please refer to this page:
http://help.wildapricot.com/display/DOC/CSS+Customization/?utm_source=contexthelp&utm_medium=site&utm_campaign=contexthelp#CSScustomization-EnteringCSScustomizationcode -
Lisa commented
Hi, Thank you. It's the Horizontal Menu for skyline downtown, and I'm playing with both horizontal options right now. Thank you in advance!
Best regards,
Lisa -
Sergey O. commented
Could you please tell us - what navigation gadget exactly are you trying to customize? Horizontal menu? Vertical menu? Or something else.
We will provide you with solution once we have your answer.