[Resolved] Anchor Link is highlighted

[troyw]

This is the wrong navigation for the Front page and appears if i do not merge the front page header element. I’m showing you this so that you can see it is no good. So I dont want this header. I want to use my Header Element, which is transparent, but the Anchor links are pink.
Please let me know when you have viewed the wrong header I have up now and I will then change to the correct header which has the pink Anchor links, which I want to be black.
Cheers

[troyw]

OK. Maybe that approach won’t work. I will put the Header Element back in and rewind question back to the beginning.
Please scrub everything previous to this response and lets start again.

I am using a Header Element for the Front page. Within this Header Element, I have chosen to utilise the Merge function, so as to style my Navigation.
Navigation Background is Transparent
Navigation Text is Black
Navigation text hover is White

***Navigation Text Current is pink***

My issue is, the ‘Navigation Text Current’ is also affecting the Anchor Text? I don’t want the Anchor Text to be Pink, I want it to remain black. I’m fine for the Navigation Text Current to be Pink, but not the Anchor Text.

Sorry about any confusion, I hope I have cleared this up now.

Thanks

[Elvin]

Any chance you can let us check the backend to check all the settings of the site to find where the color: #ff00cc; comes from?

Initially, basing on the CSS selector, it seems to be assigned from either the customer setting or as a navigation colors from the Header Element’s Site header tab settings.

But if that’s not the case then we may to check around on where it comes from to know why it only appears on front page but not on others.

Note: I’m not exactly sure if you’ve ruled out “page caching” yet. Page caching may differ from plugin’s cache if your host does caching from the backend. (host’s cpanel)

[troyw]

Thanks Elvin.
I can tell you that the color: #ff00cc; comes from the Header Element named ‘Front Page Header’. I put it in the ‘Navigation Text Current’ field to make it stand out.

The question is, why is it also making the Anchor Text color: #ff00cc; when they should be black like the other text?

See Private info

Thanks so much

[Elvin]

The question is, why is it also making the Anchor Text color: #ff00cc; when they should be black like the other text?

It’s making it use the color: #ff00cc; because Navigation Text Current styles the text link if the text link is the current page. Technically, even if its a link, its still a text as well so it gets styled. 😀

In this case, text link “Home” is the current page so it uses Navigation Text Current style. And it only applies to the Home page because the header’s display rule location is set to only the front page. 🙂

Navigation text is different from Navigation Text Current. Navigation Text is the default state. Navigation text hover is when it’s hovered and Navigation Text Current is, as mentioned, when the link is the current page the visitor is viewing.

[troyw]

So does that mean there is nothing I can do about this?

[troyw]

Furthermore, if you look at the Front Page within the Customizer, the menu works perfectly. Even the Sticky Menu when you scroll down works perfectly in the customizer? But in the front end it doesn’t work properly at all?

[Elvin]

So does that mean there is nothing I can do about this?

The workaround CSS is a way to go.

Furthermore, if you look at the Front Page within the Customizer, the menu works perfectly. Even the Sticky Menu when you scroll down works perfectly in the customizer? But in the front end it doesn’t work properly at all?

It’s actually working but it works on the sticky nav only. The styling on the header is added for the “Merged” header.

Any particular reason why color: #ff00cc; has to be set? From what it seems, there doesn’t seem to be any reason why it has to be set to that color. Perhaps you can just set #ff00cc to white?

[troyw]

Hey Elvin,
As suggested, I have added your CSS and I have changed the color from Pink to white (even though I want Black, with Grey hover & current text).
I removed the colour from the Header Element Navigation Text Current too.

But we still have the same issue, only as expected, the Anchor text is now white. The Anchor Text should be Black, just like the rest of the text in the navigation.
We now also have an issue with the Stick Menu, where the Anchor Links remain black against my Black highlight, instead of turning gray like the rest do.

Again, if we view the website using the customizer, everything is perfect, but in the front end, I have no idea what is happening?

[David]

Thats the issue with lots of custom styles on the navigation elements, it leads to layering more CSS … try adding this so the hover color ALWAYS wins over the static color:

.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
    color: #7c7c7c !important;
}

[troyw]

Hi there,
I have added that CSS and while it has stopped the Anchor Text showing up Grey, it has also removed the Grey from the Navigation Text Current. So the Home Text is now Black and cannot be seen?
I tried adding Elvins CSS is and this brought back the Grey Anchor Text again. I removed this and tried adding #7c7c7c to the Header Element Navigation Text Current and again, the Anchor links went Grey.

Is this something I have done wrong withe the other Header. At this stage I would be happy to use just one Header for the entire site, however if I do not use the Header Element, the Navigations do not float in front of the Slider or the Header Banner Images?

[troyw]

Hey team,

OK, so I have gone back to the drawing board and removed the navigation completely from all of the Header Elements.
With the inclusion of Davids code, the main menu is now working normally.

So I am now using the WordPress Menu and can control colors and so on through customizer. Great!

My only issue now is that I can’t change the Sticky Menu Colors, when you scroll down. When scrolling down, we are supposed to get a white background in the navigation, but this has gone. How do I get the Sticky Background white again?
Cheers

[troyw]

Hey guys, all good I have added this CSS and the Sticky menu is now white.

.main-navigation.navigation-stick {
    background-color: #000000;
}

Is this correct that code was required for this or should I have set this elsewhere?

Anyway, thanks for all your help.

[Author]

Posts