[Support request] All menu link highlighted – one page site

[Roy]

Hi,
I build a one-page website with anchor links in the menu.
I want to create a seperate page (about us), and I want that the links in the menu will lead to the specific part in the homepage (with the anchor links).
So, I created the anchor links with “/he/” that will lead to the home in Hebrew.
The anchor Links in the menu

Now, The Links is ok from the about page, but, in the home page, all the links are highlighted as “current”
All Links are “Current” – Image example

The color setting in the customizer – image

What is your advise for solving this issue? create a unique menu for the home page? or there is an option (not changing the colors..) to prevent all the links to be highlighted?

[Leo]

Hi there,

Any chance you can link me to the site?

[Roy]

this is the home page:
https://in3d-tech.com

this is the about page:
https://in3d-tech.com/about

I removed the prefix of the whole address before the anchor link, because this is a live website and I couldn’t leave it with the bug of all links are highlighted.

before this erase all the “anchor” links was like: “https://in3d-tech.com/#3d” and now it’s like “#3d” – so if you in the about page click on the menu won’t lead to anywhere

[Leo]

So you are wanting the current navigation background to stay the same color on home page?

If so give this CSS a shot:

.home .main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: #3f3f3f;
	background-color: rgba(248,249,250,0.8);
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Roy]

Thanks, but not perfect.
Now, the two links on the right (was the test links – with /he/ before the #) don’t show color on hover.

Example video:
https://streamable.com/lddsb

[Leo]

Seems to work for me? http://www.screencast.com/t/1xYbVQBogY

Have you fixed it?

[Roy]

No.
I cancelled the test links. this is live site with customers.
If you need to watch the “bug” in action I can back to these setting.

[Leo]

What’s different between the test links and actual links?

[Roy]

the test links was with “/he/” before the “#”. as example: /he/#about

Because there is “/he/” before the anchor link “#about”, when you was at https://in3d-tech.com/he those links considered as current.

you solved the issue of the current background color. now we need to make them hover background color..

[Leo]

Any chance you can show the problem on the live site? Hard for me to tell this way.

[Roy]

Yes.
Look at the 2 links next to the logo.

the homepage:
https://in3d-tech.com/he

About page:
https://in3d-tech.com/he/about-us/

as you can see, only these links will lead to home page from the about page. but, these links are designed as current in the homepage

[Leo]

Huh…is the CSS still added here?
https://generatepress.com/forums/topic/all-menu-link-highlighted-one-page-site/#post-402050

It should’ve changed those two.

If not can you try this?

.rtl.home .main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: #3f3f3f;
	background-color: rgba(248,249,250,0.8);
}

[Roy]

Now you can see the site with this css..
The issue, as I told before, is that the two links on the right don’t show color on hover.

Example video:
https://streamable.com/lddsb

[Tom]

You can adjust the color on hover as well:

.rtl.home .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
	color: #3f3f3f;
	background-color: rgba(248,249,250,0.8);
}

[Roy]

Thanks! I used this code:

.rtl.home .main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: #3f3f3f;
	background-color: rgba(248,249,250,0.8);
}

.rtl.home .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
	color: #ffffff;
	background-color: #760213;
}

Very close for solution…only one thing to fix…

There is different background color for the menu items when scroll down

Example video

example images:

Same color menu – top of the page

Different color – when stickey

Link to the page

[Author]

Posts