[Resolved] One Page Site – Anchors NavMenu – Color overlap problem

[Arman]

Hi Tom, happy GP pro user here.

I have a problem wich have been mentionned here and there on the forum but i cannot find any solution so far.

I use Elementor + GP Premium.

My website link : spsearch.fr

When using Anchors for NavMenu, my MenuBar is messed up with overlapping colors (see pictures attached).

I don’t where it comes from. All the links redirects on the right page, navigation is OK.

Just that messed up bar i can’t fix, the main menu.

I customized my menu to be only visible when scrolling with that piece of css – working great :

`#site-navigation:not(.navigation-stick) {
visibility: hidden;
height: 0;
overflow: hidden;
}

#sticky-navigation {
z-index: 9999;
}

I did on one page navigation site i.g with Menu linked to each section on a single page EXCEPT the blog static page for post.

I configured my menu like this :

– each sections in Elementor Anchor Menu Addon are entered as “#anchors name” for each corresponding menu link like https://spsearch.fr/#anchor

– Only menu exeption are Blog page, the other are only personalised links like https://spsearch.fr/#anchor

https://imgur.com/a/HckS9

When doing that, all anchor links on menu are overlapping with the wrong color, the background hover color doesn’t triggers anymore on these menu tabs too.

See pic below to get want i mean. I try many turnaround, no success at all. What should i do please, i’m stuck and should deliver soon to my client.

https://imgur.com/LuEUQQZ —-> what i want but using #anchors instead of #http://site-nate/#anchors but going from blog page to home page via menu doesn’t work.

https://imgur.com/kuqCwWA —-> what i have using #http://site-nate/#anchors, navigation all ok BUT mesed up colors on NavMenu Bar, which i can’t fix.

Sorry for my bad english i had hard time explaining this issue, don’t hesitate to ask me more questions.

Thank you again for your awesome work Tom.

All the best.

[Leo]

Hi there,

Not sure if I understand this completely…

Can you try setting the color in Customizer > Colors > Primary Navigation > Background Current to the same as Background and see if it gives you the result you are after?

Let me know 🙂

[Arman]

Hi Leo.

I did what you asked wih no success.

So to be sure of what’s going on i just deleted all my Generate and GP Premium prefs and reset all GP settings from scratch.

Also deleted all custom css related to menu navigation/color.

see this pic : https://imgur.com/a/gLXD4

Everytime use/mix menu with urls like http//:site-name/#anchors (section anchor) AND normal url like for BLOG and JOB tab (regular page urls) in navmenu in this exact example i get these 2 tab with some kind of FIXED color in the menubar, you know like if it was current menu on hover….. but it’s not.

And only on the menu tab linked to these regular urls (like regular main blog page, etc…) not the anchors tab in the menu linked to front page sections.

It’s mostly when i have a ONE page navigation site with multiple sections on Home page with all the sections linked to anchors to main menu AND also a few regular site pages like blog linked to the SAME menu etc…

Always in this case.

I don’t know if it is more clear to you, sorry for my bad explainations.

Regards.

It’s really weird, and it also happen on my other sites on local developmenent.

[Arman]

Or… maybe ONLY the anchors are on hover BECAUSE they are pointing to the same homepage ?

Any turnaround to make these anchor tab look like regular menu tab like (Blog/job page on my site sample)?

[Arman]

if you check my site home page with all setting resetted it will be more clear to you

spsearch.fr

Thanks you.

[Arman]

In the same example, i’m on home page i would like to have only the corresponding anchor tab grayed out/hovering corresponding to the section i’m on (like Expertise OR Cabinet OR consultants OR Contact),, all the rest of the menu bar should stay black, not ALL 4 at once on hover (because these 4 anchors are on the same page)

When i’m on BLOG page on the contrary, the menu is OK, but not on home page.

https://imgur.com/a/gLXD4

Is it more clearer to you ?

Or is making a secondary menu for other than home page the only solution here ? In fact it’s more of a navigation problem than anything else.

I’m sure it must be a dumb stuff, i’m sorry i didn’t found so far.

Sorry.

[Leo]

Can you try the following:
– Add custom class color-overwrite to those anchor menu items: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

– Then this CSS:

.main-navigation .main-nav ul li.color-overwrite[class*="current-menu-"]>a {
    background-color: #222;
}

Let me know.

[Arman]

Hey Leo thank you very very much this did the trick !

i added the custom class for each anchored menu tabs, then add this css to have exactly the desired effect including transparency :

.main-navigation {
        color: #ffffff;
	background-color: #0193cf;
}

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

.main-navigation .main-nav ul li.color-overwrite[class*="current-menu-"]>a {
    background-color: #0193cf;
}

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

#site-navigation:not(.navigation-stick) {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

#sticky-navigation {
    opacity: 0.9;
    z-index: 9999;
}

Tom, do you think it could be possible to implement the option to customize this kind of parameter directly in the Customizer one day ? (no hurry, could be nice someday ;-))

[Leo]

Awesome thanks for sharing.

We’ve only seen a couple requests on this so it will likely remain a CSS solution for now to avoid too many customizer options.

Thanks for the suggestion. We really appreciate all the feedback 🙂

[liorsade8]

hi Arman
your site has a great one page scrolling sections. and the header isnt hiding them… i have a problem that my header menu hides the text/elements when it’s scrolling down…
how do i anchor it perfectly like u’rs?
i’m using elementor as well… all pro/premium…
thanks

[Arman]

You want transparency on your menu bar ? —-> check “opacity” value range from 0 to 1 in the css i copied.

If you want to hide header completely —-> customizer —-> Layout —-> Header —-> put all header margins to 0

In elementor you have an achor link you can insert in the corresponding section :

https://www.google.fr/search?q=elementor+anchor+menu&ie=utf-8&oe=utf-8&client=firefox-b&gfe_rd=cr&dcr=0&ei=mfDQWYGiOdPc8Af9lLioCQ

Cheers

[Arman]

By the way the live spsearch you see now is not the one i did with generatepress and elementor.

It was so beautiful that when i announced the pricing to my client she dropped the offer, so i let her old ugly site you see now.

Sometimes we loose even if we do good work… that’s life lol

[liorsade8]

hi, the problem is still out there.
if you look closely at the site:
https://www.flo.co.il/ (made with avada)
you will see that when u press any menu page it’s scrolling up until the begining of that page..div…box…
and the header navigation isnt hiding it… it’s above it…
and in your theme it’s hiding it… look at:
this is what happens today: https://postimg.org/image/fzw5wroor/
this is the desired outcome: https://postimg.org/image/uj3ay0hrv/

please help and understand 🙂

thanks

[Arman]

Oh i think i see what you mean.

It’s more Elementor related to me.

I had this problem to.

What i did is inserting a “spacer” module from Elementor just after the “anchor” module.

Just play with the spacer spacing in pixels to match your liking.

Tell me if it works for you.

Nice professionnal site indeed !

[liorsade8]

Hi
But the problem with a spacer that it’s expanding the boxes and I don’t want to…
It should work just like your site or my avada example…
No?

[Author]

Posts