Mobile Menu covering Slider

I’m not sure I understand the problem. Shouldn’t the mobile menu, when open, cover up the slider? It can’t go under the slider, or you won’t be able to see the menu. I don’t see any pages that have static pages in the header. Can you post a link to a page that has static images in the header?

https://imgur.com/Zj3GmSP

See image… The Mobile Menu is covering the Slider.

OK, now I understand. It’s not when the mobile menu is open, it’s the mobile header that looks like it’s covering the top of the slider. I’ll take a look. Might not be right away (it’s 2AM right now and going to bed) but probably in the morning, unless someone else can jump in.

Much appreciated!!! Can wait ??

I’m not sure I understand the issue, can you list out steps we need to take to replicate the problem on your site?

If you goto the url https://www.wagawhey.com on your mobile the Mobile Header Menu covers the slider. I don’t want to change the opacity of the Mobile Header Menu, I want the slider to show below it. I can’t change the margin/padding of the slider with CSS or in the settings of the Rev Slider otherwise this will change the view on desktop.

Are you the developer of the site? There is some Custom CSS being used in your ‘mobile-menu’ plugin that is the cause of the position. Looks like you need to use more breakpoints to handle the padding better;

/* Our css Custom Options values */
@media only screen and (max-width:1023px) {
  ...

  .mobmenu-push-wrap, body.mob-menu-slideout-over {
    padding-top: 105px;
  }
  ...
}

That ‘105px’ value is what’s pushing the slider down. It’s just not enough. However if you increase that value you’ll receive a white gap above the slider on larger devices.

So my advice is to create as many media queries you need to that satisfies your view of the slider.

It’s not going to be a great experience for your users but this is the implementation that you’ve already chosen.

I managed to get assistance from the plugin author…

FYI for anyone who needs help:

Add the code below to the custom CSS option inside the general options tab.

@media only screen and (max-width: 1023px){
.mobmenu-push-wrap, body.mob-menu-slideout-over {
    padding-top: 127px!important;
}
}

Clear the cache and test again. Let me know the result.