Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support One Page Site – Anchors NavMenu – Color overlap problem

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #389951
    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.

    GP Premium 1.4.3
    #390108
    Leo
    Staff
    Customer Support

    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 🙂

    #390130
    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.

    #390136
    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)?

    #390137
    Arman

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

    spsearch.fr

    Thanks you.

    #390144
    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.

    #390302
    Leo
    Staff
    Customer Support

    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.

    #391011
    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 ;-))

    #391046
    Leo
    Staff
    Customer Support

    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 🙂

    #394951
    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

    #395277
    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

    #395278
    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

    #395438
    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

    #395454
    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 !

    #395455
    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?

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.