How to remove banner from showing on mobile menu

Also I am realizing that on the IPAD and tablets the banner is covering the header (logo and menu).. how could this be adjusted to stay at the top of the header on tablets?

Thank you,
Erica

Hi Erica,

Try this CSS snippet and see if that makes the banner work how you expect:

body.--mobileNav--active .simple-banner {
    z-index: 1;
}

Let me know if that works or any other changes you want to make.

Hello,

That doesn’t seem to change anything. Am I suppose to be copying and pasting also these parts (})? Or do I leave them out?

Is it better to paste in my own custom CSS plugin or within the plugin section of Simple Banner?

Thanks

You can use your own css plugin or the Website Custom CSS field of Simple Banner, both should work. You need to copy the entire snippet and also make sure any server cache is cleared in order to see the changes.

Have the entire snippet copied, I can show you here with an image, although I am not sure if it will upload here:

Cleared the cache, and there is no change, either on mobile menu or tablets

Okay, image didnt show up, but I have the snippet copied under Simple Banner Custom CSS, the first box that just says simple banner{

That won’t work, you need to use the Website Custom CSS field, it’s in the pro features. If you don’t have the pro version you will need to download a custom css plugin.

Okay, I have copied it into my custom CSS plugin, although it seems the snippet is not completely correct, there is a yellow triangle sign beside it.. can you confirm how it should look copied EXACTLY into a CSS snippet?

Updated, cleared cache and no change.

You may want to try a different css plugin. Whatever you used just injected it right into the html, https://ibb.co/6w5mKh2. Maybe you just need a style tag so something like:

<style type="text/css">body.--mobileNav--active .simple-banner {z-index: 1;}</style>

Ohh thanks for that, I understood the problem and was able to use the original css code. That has solved the problem for the mobile menu!

Now I just need the banner to sit ABOVE the header on the tablets, like on the desktop. At the moment it is covering the header…

You can try adding:

@media (max-width: 1024px) {
.elementor-309 .elementor-element.elementor-element-ca00139 {
    padding: 80px 13px 7px 13px !important;
}
}

That seems to have worked! Thank you very much for the help.

awesome. Glad that helped.