-
AuthorPosts
-
October 13, 2015 at 1:05 pm #518041
I have a layer slider, with a content section placed in the layer slider using some Quick CSS code (see below). When the mobile menu is engaged, the content blocks part of the mobile menu. You can see what I mean here –> http://appwarelabs.com/janetstewartrealestate
Just shrink down the browser until the mobile menu appears, then click on the mobile menu.I’m sure it has something to do with the Z order of the content-section. I tried changing the Z order to 1 and -1 but doesn’t’ work. This is what I have in my Quick CSS code;
// This snippet forces the content to stay above the layer slider. Without this, the layer slider covers the content.
#home-page-section {
z-index: 10000;
position: relative;
margin-top: -300px;
}// This snippet forces the mobile menu to engage earlier, so the logo doesn’t cover up the menu items.
@media only screen and (max-width: 1200px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
}Any ideas ? Thanks !
October 13, 2015 at 7:39 pm #518309Hey bibbitybop!
Add this to your custom CSS.
ul#mobile-advanced { z-index: 99999 !important; } .show_mobile_menu #advanced_menu_hide { z-index: 9999999 !important; }
Cheers!
ElliottOctober 14, 2015 at 1:39 am #518457Thanks Elliot, but still can’t get it to work. I really like the look of the mobile menu, but it’s still gets hidden behind the content section. You can view here; http://appwarelabs.com/janetstewartrealestate
Any other ideas I could try ?
Below is what I currently have in the CSS;
#mobile-advanced {
z-index: 99999 !important;
}
.show_mobile_menu #advanced_menu_hide {
z-index: 9999999 !important;
}#home-page-section {
z-index: 10000;
position: relative;
margin-top: -300px;
}#top .avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial {
min-height: 310px;
}@media only screen and (max-width: 1200px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
}October 15, 2015 at 10:37 am #519107Hi!
The very first css declaration in the code above should fix it:
#mobile-advanced { z-index: 99999 !important; }
Please try to disable the W3 Total Cache plugin to disable the minification. Test the page before enabling it back.
Regards,
IsmaelOctober 15, 2015 at 1:58 pm #519300It worked ! You guys are great. thanks again – Joe
October 15, 2015 at 6:14 pm #519472Quick update.. while it works perfectly on my laptop/browser, it doesn’t work on my Iphone. For some reason, the mobile menu is still being covered by the content section. Any reason why it wouldn’t work on the smartphone ? thanks
October 16, 2015 at 8:31 am #519704Hi!
It works OK when I check it. Please remove the cache / history in your mobile browser before checking the page.
Cheers!
IsmaelOctober 16, 2015 at 3:34 pm #520047You are correct. Thanks again. – Joe
-
AuthorPosts
- The topic ‘Content Section blocks Mobile Menu’ is closed to new replies.