-
Posts
-
I would like to modify the font size of my navigation menu which is a sidebar.
Just the items between Home and My Art Site. Some I would like to have a bigger font and some I would like to be bold ..and some I don’t want to change at all. Is there a way to modify them independently? I looked into add a custom CSS class but that doesn’t seem to be an option. (Maybe because it is a sidebar?)
Thanks,
JasonHey jkos,
Thank you for the inquiry.
You can configure the Main Menu > Main Menu Links in the Enfold > Advanced Styling panel. Please check the screenshot below.
Best regards,
IsmaelAhhh thank you. I have never used the advanced styling tab. I was able to make the global adjustment I was looking for and I also remembered how to make custom css available for menu items. I have one menu item that needs to be a couple points smaller than the others.
All good!I may have spoken too soon. lol
There is one menu item that I want to modify independently. It is the ‘Download my contact info’. It is just a little too long for the space. If I could reduce the font size or font spacing would probably do the trick. I have assigned that menu item a custom css class = dmciThen in Appearance / customizing / custom css
This is my css..dmci {
font-size: 20px;
}I see no change.
I must be missing something. lolHi,
Thank you for the update.
You can try this css to adjust the letter spacing of the “Download my contact info” menu item:
.html_header_sidebar #header .av-main-nav > #menu-item-4085 a { font-size: 16px; letter-spacing: 0.02em; }Best regards,
IsmaelYep that is it! Thank you. I was able to make the adjustment I wanted.
For my own learning, is there a reason in this case why we would use menu-item-4085 instead of my custom css class = .dmci
What would that code look like? I tried replacing #menu-item-4085 with .dmci but that didn’t work. Just curious.
Thanks again!
JasonHi,
Glad to know it’s working. Regarding the class selector .dmci, it’s probably not working because it’s being overridden by css rules with higher specificity. You may need to adjust it and use more specific selectors. Please remove the previous css code, then replace it with this:
#top #header .av-main-nav > .dmci a { letter-spacing: 0.0em; }This might help: https://css-tricks.com/specifics-on-css-specificity/
Best regards,
IsmaelThank you for showing me what the .dmci would look like – that is helpful. Certainly the css-tricks page will be helpful too.
Until next time.. lol
Jason
- The topic ‘Sidebar nav menu font size’ is closed to new replies.