Menu Font Size

[sheilabeth33]

I would like to change the font size for the menu – both the main menu items and the sub menu items. I have looked in firebug but can not find what the element is.

Can you please provide me with the custom css to put in the theme admin area to change this? (I find it so strange that this is not an option!)

Thank you very much –
Sheila

Topic

[Jason Bobich]

Hi Sheila,

Yes, there is no option for this and will be a customization you’ll need to make. Using my Chrome dev tools, here’s what I see for selectors you can use for your custom CSS.

#access li a, 
#access a.sf-with-ul {
	...
}

And you’ll want to utilize the font-size property.

http://www.w3schools.com/cssref/pr_font_font-size.asp

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

[sheilabeth33]

Thank you – this worked perfectly. Unfortunately, now the menu items are too close together on the main menu.

Can I add space in between these?

[Jason Bobich]

Sure, just add padding to the left and right of the links you’re already styling the font-size of.

http://www.w3schools.com/css/css_padding.asp

[Author]

Replies