[Resolved] Classes for menu not working

[Klara]

Hi, I’m buliding a site and I’m using the Menu to add a class to one of my links in my primary menu. Then I’m trying to style in the extra css code, like so:

.ahlstromlink {
color:red;
font-weight:normal;

}

I can see that the class shows up when I look at the code

<li id=”menu-item-28″ class=”ahlstromlink menu-item menu-item-type-custom menu-item-object-custom menu-item-28″>A. Ahlström

But the formatting does not work, and the rules do not show up when I inspect the element.

[David]

Hi there,

So GP writes its menu item styles with this CSS Selector:

.main-navigation .main-nav ul li a

To override that and apply your custom selector it gets applied to the li like so:

.main-navigation .main-nav ul li.ahlstromlink a

So your CSS should be:

.main-navigation .main-nav ul li.ahlstromlink a {
    color: red;
    font-weight: normal;
}

[Klara]

Thank you David! Hope you have a wonderful day!

[David]

You’re welcome = and you too!

[Author]

Posts