Sticky Menu Bar Item Appear Over Slideout Menu

This topic has 9 replies, 3 voices, and was last updated 3 years, 4 months ago by Fernando.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
April 18, 2022 at 4:29 am #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!

April 18, 2022 at 4:34 am #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 ?

April 18, 2022 at 6:50 am #2192169

Mike

Hi David,

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

Thanks!
Mike

April 18, 2022 at 7:18 am #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;
}
```
April 18, 2022 at 3:37 pm #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

April 18, 2022 at 9:30 pm #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[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! 🙂
April 19, 2022 at 2:23 am #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!
April 19, 2022 at 5:01 pm #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. 🙂

April 20, 2022 at 12:06 pm #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
April 20, 2022 at 9:59 pm #2195480

Fernando
Customer Support

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

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

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

Popular Articles

Start building better websites today.