Sticky Menu Bar Item Appear Over Slideout Menu

Hi there,

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

Hi David,

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

Thanks!
Mike

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;
}

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

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[i].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! :)

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!

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

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

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