[Support request] Sticky Menu Bar Item Appear Over Slideout Menu

Home Forums Support [Support request] Sticky Menu Bar Item Appear Over Slideout Menu

Home Forums Support Sticky Menu Bar Item Appear Over Slideout Menu

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2192079
    Mike

    Hi,

    I have added a custom button to my sites header next to the slide out menu toggle.

    What I am trying to achieve is to make the button and the slide out menu toggle sticky.

    Then, when a user opens the slide out menu on desktop I want the button to appear over the slide out menu.

    I have played around a bit with z-index and setting the elements to a fixed position but neither seems very elegant and I have not yet found a way to show the button over the slide out menu.

    Any recommendations?

    Thanks!

    #2192082
    David
    Staff
    Customer Support

    Hi there,

    just to be clear, are you wanting to keep the entire site header visible when the Off Canvas Panel is open ?

    #2192169
    Mike

    Hi David,

    Sorry, just the “BOOK NOW” button not the whole header. So thats .nav-cta

    Thanks!
    Mike

    #2192187
    David
    Staff
    Customer Support

    Almost impossible to do without Javascript as z-index is contextual, eg. your nav-cta is nested in several parent containers and unless the top level header-wrap sits in front of the off canvas then none of its children can….

    Alternative is to hook in another button inside the off canvas:

    1. Create a New Hook Element:

    https://docs.generatepress.com/article/hooks-element-overview/

    2. Add your CTA HTML to the element, with an additional CSS class so we can target that specifically:

    <a class="button nav-cta in-off-canvas" href="https://google.com">BOOK NOW</a>

    3. Select the generate_inside_slideout hook

    4. Set the Display Rules to Entire Site

    5 Save that and add this CSS to your site to position it:

    .nav-cta.in-off-canvas {
        position: absolute;
        right: 100px;
        top: 30px;
    }
    #2192799
    Mike

    Hi David,

    Thanks for that. Makes sense and was what I was ultimately thinking I would have to do!

    What do you think in terms of making the slide out menu toggle and current “BOOK NOW” button sticky on scroll?

    So just those two buttons and none of the other menu content or logo… not sure using position: fixed !important; is the best way to go, not least because it makes the button appear incorrectly when the WP admin bar appears.

    Much appreciated!

    Mike

    #2192963
    Fernando
    Customer Support

    Hi Mike,

    With the current structure you have, I believe you would still need to use fixed.

    Then modify the top value when the admin bar exists. For instance, if you’re making the menu-bar-items fixed, you can create a new Hook Element hooked to wp_footer with this code:

    <script>
     const $wpadminbar = document.getElementById("wpadminbar");
     var $holder = document.getElementsByClassName('menu-bar-items');
        if($wpadminbar){
    			for(var i = 0; i < $holder.length; i++){
        $holder.style.top = "100px";
        }
           
        }
    </script>

    This code detects if there is an admin bar, and then replaces the top value of the menu-bar-items to 100px. You can also modify other style CSS rules in the same way.

    Hope this helps! 🙂

    #2193204
    Mike

    Thanks Fernando.

    I worked out a nice solution…

      /* Static Menu Bar Items */
    
      .menu-bar-items {
        position: fixed;
        right: 0;
      }

    Button seems to look OK both with and without the admin menu appearing.

    Going to look at making the button appear in the slideout nav next, will update once I have that sorted!

    Thanks!

    #2194104
    Fernando
    Customer Support

    You’re welcome Mike! Glad you worked out a solution! Feel free to reach out anytime once you have it sorted. 🙂

    #2195188
    Mike

    So I got the button in the slideout nav nailed.

    I was going to go with Davids approach of a second hook, however to ease administrative overhead in the future I was keen on doing something in the frontend that would be easily editable – like a menu item!

    So I created the menu item using the existing .nav-cta class on the menu item HTML content plus an extra .slideout-cta class applied to the menu item itself.

    Then used the following extra code:

    /* Slideout CTA Button Width Only */
    
    .slideout-cta{
    
      width: auto !important;
    
    }
    
    /* Slideout CTA Fill <a> Over Button */
    
    .slideout-cta > a:first-child{
    
      width: 100%;
      height: 100%;
      position: absolute;
    
    }
    
    /* Slideout CTA Fill <a> No Hover */
    
    .slideout-cta > a:first-child:hover {
    
      background-color: unset !important;
    
    }
    @media (min-width:769px) {
    
      /* Slideout CTA Position */
    
      .slideout-cta{
    
        margin-top: 34px;
        margin-right: 96px;
        position: fixed !important;
        top: 0;
        right: 0;
    
      }
    
    }

    Basically I did the trick of making the initial <a> tag that held the URL be positioned absolute over the button and 100% width and height, so the user actually was clicking on that element and not really the button behind. This means I can easily edit the href as I would do with any other menu item.

    Then on desktop I set it as a fixed element positioned in the same place as the non slideout menu equivalent.

    Using a menu item also has the advantage on mobile it just appears in the same location a normal menu item would although as a button with the styling it gets from the .nav-cta class, so I didn’t have to write any extra CSS to get that working!

    Maybe that makes sense… 🙂

    Mike

    #2195480
    Fernando
    Customer Support

    Makes sense! Glad you found a way! Feel free to reach out if you’ll need assistance with anything else. 🙂

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