Menu font size

[odyn]

I’ve been trying to make font of current menu item larger than the rest. I’ve tried to insert it into Custom code, style.css and custom.css, but it seems settings got overridden no matter where I’ve put them (in firebug it was strikken out).
So nothing actually worked, except for font-weight (which is also strikken out, but still works). This is what I have in custom css now.

#main-menu li.current-menu-item { 
font-size: 400%; 
font-size: 22px; 
font-weight: bold; 
font-weight: 800; 
}

Where should I put these things for them to work?

I actually wanted to use jump start theme but the client liked alyeska menues so much I got overvoted 🙂

Topic

[Jason Bobich]

Hello,

You’re almost there. You want to target the anchor tags just within the list items. —

#main-menu li.current-menu-item > a { ... }

[odyn]

Thank you, Jason. My problem however is these settings get overridden somewhere, whether they are in style.css custom css or in theme’s custom css box.

I added !important to it and now it seems to work. It would still be good to know however, where those overrides come from.

[Jason Bobich]

You shouldn’t need to use !important if you’re doing everything correctly and coming up with the proper selectors. There is almost never a need for this, it’s a bit of a hack, and will be harder to debug later.

I’d need to see a link to specifically what you’re doing to really tell you anything else. So, put your CSS in the custom.css file of your Child theme (should always go here in your current setup), remove any calls to !important and let’s see a link to what you’re working on.

[Author]

Replies