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

Overriding active link styling in header navigation

  • Resolved justadandak

    (@justadandak)


    2 weeks, 3 days 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

    2 weeks, 3 days 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;
}
    justadandak

    (@justadandak)

    2 weeks, 3 days 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

    2 weeks, 3 days ago

    Yep, try this:

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

    (@justadandak)

    2 weeks, 2 days ago

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Topic Tags

Views