[Resolved] Menu dropdown background overlay

Home Forums Support [Resolved] Menu dropdown background overlay

Home Forums Support Menu dropdown background overlay

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1605782
    Joshua

    Hi GP Team,

    I found this post here and Tom provided some CSS, but that CSS didn’t work properly on my site: https://generatepress.com/forums/topic/navigation-overlay/

    I’d like to have a background overlay on my site when someone opens the mega menu. Similar to the off-canvas menu on mobile, when that menu opens the background goes dark. I’d like to do that except on desktop. Is this possible?

    My site for reference: https://mayofi.com/

    #1605790
    Joshua

    I also found this on StackOverflow, but cannot figure out how to implement the JS into my site https://stackoverflow.com/questions/28542956/show-overlay-in-background-when-hovering-over-parent-menu-items

    #1605803
    Elvin
    Staff
    Customer Support

    Hi,

    Try adding a Hook Element with this code hooked to generate_after_header with Display rule location of “Entire site”.

    <div id="overlay"></div>

    And then, add another Hook Element with this script hooked to wp_footer with Display rule location of “Entire site”.

    <script>
    jQuery('ul#menu-primary-menu-1').hover(function(){
        jQuery('#overlay').fadeTo(200, 1);
    }, function(){
        jQuery('#overlay').fadeTo(200, 0, function(){
            jQuery(this).hide();
        });
    }); 
    </script>

    You then add this CSS:

    #overlay {
        background:rgba(0, 0, 0, 0.5);
        display:none;
        height:100%;
        left:0;
        position:absolute;
        top:0;
        width:100%;
        z-index:5;
    }

    Here’s how to add CSS: https://docs.generatepress.com/article/adding-css/

    A wise man once said:
    "Have you cleared your cache?"

    #1605808
    Joshua

    Hey Elvin,

    Thanks for the quick reply! I followed these steps. However, when I hover over the menu, it blinks repeatedly. Here’s a quick video of it: https://mayofi.com/wp-content/uploads/2021/01/Screen-Recording-2021-01-04-at-10.32.25-PM.mp4

    #1605860
    Elvin
    Staff
    Customer Support

    Try adding this CSS:

    header#masthead {
        z-index: 10000;
    }

    So that the header doesn’t get masked by the overlay just incase it is.

    You then change the script a bit to this:

    <script>
    jQuery('div#primary-menu').hover(function(){
        jQuery('#overlay').fadeTo(200, 1);
    }, function(){
        jQuery('#overlay').fadeTo(200, 0, function(){
            jQuery(this).hide();
        });
    }); 
    </script>

    A wise man once said:
    "Have you cleared your cache?"

    #1605897
    Joshua

    Hey Elvin,

    Unfortunately, it’s still doing the quick flickering even with the modified code.

    #1605934
    Elvin
    Staff
    Customer Support

    Let’s modify the approach a bit:

    Replace the previous script with this:

    <script>
    const nav = document.querySelector('div#primary-menu ul.sf-menu');
    const overlay = document.querySelector('#overlay');
    
    var fadeOut_handler = function(){
    overlay.classList.remove('is-overlay-on');
    };
    
    var fadeIn_handler = function(){
    overlay.classList.add('is-overlay-on');
    };
    
    nav.addEventListener('mouseover',fadeIn_handler,false);
    nav.addEventListener('mouseout',fadeOut_handler,false);
    </script>

    Then add this CSS:

    #overlay.is-overlay-on{
    	display:block;
    	animation: fadeInOverlay 0.2s linear;
    }
    
    @keyframes fadeInOverlay {
      from {opacity:0;}
      to {opacity:1;}
    }
    
    @keyframes fadeOutOverlay {
      from {opacity:1;}
      to {opacity:0;}
    }

    Here’s how it’s behaving: https://share.getcloudapp.com/L1uOyZQx

    Here’s the demo site if you wanna check or get a feel of it.

    A wise man once said:
    "Have you cleared your cache?"

    #1605946
    Joshua

    Hey Elvin,

    I regret to say that this didn’t work for me. There must be something else on my site conflicting this?

    #1605958
    Elvin
    Staff
    Customer Support

    I regret to say that this didn’t work for me. There must be something else on my site conflicting this?

    Can you try disabling all the caching plugin and see what happens? Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1605962
    Joshua

    I disabled my caching plugin, WP Rocket, and still nothing. I even deactivated all the plugins except GP Premium, and still nothing. I cleared my browser cache, website cache, and server cache and tried, and unfortunately still nothing.

    #1606404
    David
    Staff
    Customer Support

    Hi there,

    the blinking is most likely occurring because the overlay is blocking the menu item, which stops the hover event, which removes the overlay, and the hover works again…. rinse and repeat.

    Try adding pointer-events: none; to your #overlay styles so it doesn’t block the hover.

    Alternatively a pure CSS method:

    #site-navigation:hover + #page:before {
        opacity: 1;
        transition: opacity 0.3s ease-in-out;   
    }
    #page {
        position: relative;
    }
    #page:before {
        content: '';
        background-color: rgba(0,0,0,0.5);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 100;
        opacity: 0;
    }

    The caveats are, it applies to the entire Navigation being hovered, and relies on the #page element to be immediately after the nav, so that means removing the overlay element and any other hooked elements that come between the nav and the #page.

    #1606697
    Joshua

    Ahh, that was the culprit David thanks!

    After some testing, it seems a little wonky. For example, the mouseover event doesn’t always trigger the background overlay, even if the menu is triggered. Also, the menu gets the dark overlay effect as well instead of just the content. I changed top: 0; to top: 1; and that seemed to fix the menu getting the dark overlay, however, it also adds an extra right scrollbar for some reason.

    I don’t want to waste any more of your guy’s time, you’ve been too helpful! I’ll hire a developer on Upwork who can take a closer look at my situation and help me out.

    Thanks so much again David and Elvin!

    #1606715
    David
    Staff
    Customer Support

    Glad we could be of help.
    Happy to take another look at the overflow issue and the wonky mouse over event if you want…

    #1607500
    Joshua

    Hey David,

    I don’t want to take up too much of your time, I know this is probably outside of the support scope anyways and I really respect your guys time and willingness.

    Thanks as always, David!

    Edit: I’ll post the code that worked for me soon

    #1607653
    David
    Staff
    Customer Support

    That would be awfully kind of you 🙂 Hope you find an answer soon

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