[Resolved] Anchor Link is highlighted

Hi there,

edit the menu items that are anchors, and give them a CSS Class of anchor-link

Then edit thus CSS:

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu > .menu-item > a:hover::after {
        width: 252%;
        z-index: -1;
    }
}

to exclude the anchor-link class ie.

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item.current-menu-item:not(.anchor-link) > a::after, .main-navigation .menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu > .menu-item > a:hover::after {
        width: 252%;
        z-index: -1;
    }
}

Hi there,

The grey text color you see seems to be coming from a customizer setting.

Home is colored grey because it’s the current page you’re on.

You can check it on Appearance > Customize > Colors > Primary navigation. It’s the “Current” link color. You can change the color from there. 😀

Note: I’m not sure it should be black because it’s background is black. The text should be contrasting, else it wont be readable. 🙂

Add this CSS:

.main-navigation .main-nav ul li[class*="current-menu-"].anchor-link > a {
    color: #000;
}

I find it strange that the generated inline style of the homepage differs from the rest of the site.

I’ve observed the pages and noticed that the homepage has this CSS:

.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, .header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a, .header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a {
    background: rgba(10,10,10,0);
    color: #a0a0a0;
}

While the rest of the pages has this:

.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, .header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a, .header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a {
    background: transparent;
    color: #ffffff;
}

These 2 CSS is inside generate-style-inline-css. That’s where the customizer CSS are added. It’s strange that it differs because generate-style-inline-css styles are basically GP’s “global styles” meaning it should be the same for all pages.

Can you check if the site’s host have some sort of page caching?

Note: The easy way out is by adding this CSS on the customizer setting so everything is “forced” to use this by means of precedence:

.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, .header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a, .header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a {
    background: transparent;
    color: #ffffff;
}

But perhaps it’s worth knowing why the difference happened in the first place. 🙂

I think this is because I am using the navigation settings from Elements, not the customizer?

Even then, if you’re using just 1 Element set for “Entire Site”, the CSS should be uniform since that 1 Element should generate the same CSS every time on all pages.

But then again if you’re using 2 different Header elements, (one for front page, one for the rest of the site) then it makes sense.

If this is the case, the grey link color was likely set on the Header Element assigned to the Front page. You can change it from there. 😀

You can actually set the navigation colors if the Header Element is set to “Merge”.

You should be able to see this option – https://share.getcloudapp.com/p9ukqbj7 – on the Header Element’s “Site Header” tab when it’s set to “Merge” and the “Navigation Colors” tickbox is checked. 😀

You should keep “Merge” setting and just set the backgrounds to transparent. 😀

But if it isn’t working, we can keep the working setting you just had and use the CSS for a quick workaround.

.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, .header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a, .header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a {
    background: transparent;
    color: #ffffff;
}