CSS selector for “home” page link when current?

  • Resolved Bob

    (@bobk88)


    2 years, 6 months ago

    I’m trying to move my site from an old third-party site builder (Dynamik Website Builder (DWB), a Genesis child theme) to Twenty Twenty-Two.

    My site is all static pages and not terribly complicated. I prefer a minimal look and don’t currently use page titles.

    One little touch I like is having the nav menu item for the current page be a different color.

    I can do this in DWB/Genesis, but there’s a problem with 2022:

    The 2022 theme assigns the class .current-menu-item to all pages EXCEPT for the static home page.

    I’m wondering if there’s another way to target the home page nav menu link when it’s the current page. So far, I haven’t seen anything.

    Assigning a custom CSS class to that menu item doesn’t help, because it applies all the time, not just when it’s the current page.

    One might argue that it’s clear when you’re at the home page, but I’d like the highlighting of the current page to be consistent.

    Ideas?

    Thanks!

    • This topic was modified 2 years, 6 months ago by Bob.
    • This topic was modified 2 years, 6 months ago by Bob.

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

Viewing 7 replies - 1 through 7 (of 7 total)

  • There is a .home class for your home page.

    This should work…

    .home .wp-block-navigation-item.home-menu.wp-block-navigation-link,
.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
  color: #365ABA !important;
}
    Thread Starter Bob

    (@bobk88)

    Perfect! Thanks so much, @hikinmike ! (I was looking in the wrong place in the Inspector.)

    I’m curious: after adding that CSS, the color style is crossed out and grayed out in the Inspector. I thought that means it’s overridden by a more specific style. But when I un-check the checkbox next to it, the color reverts to black, which I assume means it is taking effect. Any explanation would be much appreciated!

    I’m not seeing anything like that when I use the inspector (Brave).

    Thread Starter Bob

    (@bobk88)

    Here’s a screen shot (also from Brave).

    Another thing I don’t understand is that when other pages are current, in the “Elements” column of the Inspector, a couple of lines above the <span> element for the item label, is a “current-menu-item” class (like this); but that class doesn’t appear for the home page (link).

    Thanks!

    • This reply was modified 2 years, 6 months ago by Bob.

    The home page doesn’t have a current-menu-item because it has it’s own selector which is .home-menu. I’m really just a guy that knows just enough HTML/CSS to be dangerous, so that’s the best answer I can give, sorry.

    Thread Starter Bob

    (@bobk88)

    I guess it makes sense that “Home” has a separate class, since it’s selected in “Settings > Reading Settings”.

    I’m really just a guy that knows just enough HTML/CSS to be dangerous

    Same here, except more dangerous since I know less! ??

    Thanks again for the help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS selector for “home” page link when current?’ is closed to new replies.