Remove :active state from main menu item when on homepage

[Ben Siegfried]

I know how to do anchor links to take you to a position on a page or to another specific area on a different page, for example. I am trying to do the same thing with the trigger being a main menu (Services menu link) item and the target being some area further down the homepage. I have succeeded in doing this but when you're on the homepage the :active state on the trigger (Services menu link) is there. When you're on a different page naturally it isn't there. I've tried targeting the :active state for this specific menu item to no avail. Is there a way to do what I want without the :active link state showing for the trigger (main menu item)?

http://dev.siegfriedmedia.com

[Lauren @ OnceCoupled]

Well, the link is 'active' because WordPress is recognizing that the base URL is the same as your current page, and therefore is adding classes like current-menu-item current_page_item.

If you want it removed from all pages, you just have to change your style sheet to remove those styles.

If you want it removed from just the home page, you could use the .home selector to remove it. That said, even if the user was at that particular anchor tag, you wouldn't see an 'active' link.

Here's what the CSS might look like:

.home .genesis-nav-menu .current-menu-item > a {
	background-color: none;
}

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Ben Siegfried]

Oh thank you so much for this! I did not try ".home"

background-color: none; did not work.

This is what actually works to get it all to behave as a normal menu item:

.home .genesis-nav-menu li a:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.home .genesis-nav-menu .current-menu-item > a {
	background-color: rgba(0, 0, 0, 0);
}

[Lauren @ OnceCoupled]

Hm, I tested that code before I posted it. All the same -- glad it's working!

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Ben Siegfried]

Thanks again for clueing me in on that one!

[Author]

Posts