Archived topic

Classes for menu not working

3 replies · Started by Klara on March 10, 2023

Viewing posts 1–4 of 4

March 10, 2023 at 2:22 am #2562613

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.

March 10, 2023 at 4:03 am #2562725

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;
}

March 10, 2023 at 5:23 am #2562815

Thank you David! Hope you have a wonderful day!

March 10, 2023 at 6:28 am #2562883

You're welcome = and you too!

This archived topic is closed to new replies.

Start building better websites today.