Support » Theme: Twenty Twenty-One » Overriding active link styling in header navigation

Overriding active link styling in header navigation

  • Resolved justadandak

    (@justadandak)


    9 months, 3 weeks ago

    Hey good humans – have a couple of links in my header navigation menu that are anchor point to other sections on the home page.

    These links are underlined and would like them not to be (unless hovered like the other links) – is there a way to do that please?

    Thanks in advance for your help!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    9 months, 3 weeks ago

    Each menu item has its own class, so you can use that to target the links you want to change.

    For example, this is for removing the underline on the Clients item:

    #menu-item-34529 a {
    text-decoration: none;
}
    Thread Starter justadandak

    (@justadandak)

    9 months, 3 weeks ago

    That’s superb – thank you @macmanx – is there anyway of keeping the hover underline (although think it’s dotted) active though?

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    9 months, 3 weeks ago

    Yep, try this:

    #menu-item-34529 a:hover {
    text-decoration: underline;
}
    Thread Starter justadandak

    (@justadandak)

    9 months, 3 weeks ago

    Finger guns to @macmanx and deep waist bows – appreciated!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Overriding active link styling in header navigation’ is closed to new replies.

Topic Tags

Views