[Resolved] Anchor Link is highlighted

[troyw]

Hi team,

I have just added a couple of anchor links to the menu. They link to a couple of sections on the Home Page for ‘About’ and Join’. Problem is that this has caused the menu items to highlight on the Home Page. How do I stop the Anchor Links from highlighting?

Thanks

[David]

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;
    }
}

[troyw]

Hi there,

That seems to have worked great, thank you. However the Anchors are now Grey and should be black?

[Elvin]

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. 🙂

[troyw]

Hey Elvin,
It only does this on the Home page navigation, which is black. Its the ‘About’ and the ‘Join’ menus that are Grey and should be black like the rest of the menus. Obviously the Home menu current should be grey, but the anchor links shouldn’t look any different to the other menu items.

Thanks

[David]

Add this CSS:

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

[troyw]

Hi,
I have added this CSS and nothing happened?
The colours for this Navigation are controlled by the Global Header Element. Navigation Text Current is set to Gray, but it is also affecting the Anchor Text.
Thanks

[Elvin]

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. 🙂

[troyw]

Hey Elvin,

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

[Elvin]

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. 😀

[troyw]

Hey Elvin,
Yes indeed, the Front page navigation is set by a seperate header element. And yes, I can change the colour of the ‘Navigation Text Current’ in the Header Element. To demonstrate I have changed it to bright pink as you will now see on the Front Page Navigation.
My issue is the Anchor texts being bright pink as well as the Navigation Text Current?

There is no way I can set the colour for anchor links in the Header Element, so how do I do this?

Thanks

[Elvin]

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. 😀

[troyw]

Hey Elvin,
If I do this, I lose my custom navigation and get a navigation with white background. Please see now. I don’t want that navigation, I want the navigation I created in the Header Element with a transparent background, but I don’t want Pink Anchor links. I want the Anchor links to look like any other link in the Navigation.
As you can see, by turning off Merge in the Header Element, the navigation showing now has a white background and it sits behind the Slider. Which is why I chose to use the Header Element becauseI can make the Navigation background transparent and place it in front of the slider.

I don’t even know where the current navigation with white background is coming from as I can’t change it at all?

[Elvin]

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;
}

[troyw]

Sorry, please look now. I flicked it back momentarily which is obviously when you looked again

[Author]

Posts