Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 13, 2015 at 1:05 pm #518041
    bibbitybop

    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 #518309
    Elliott

    Hey 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!
    Elliott

    October 14, 2015 at 1:39 am #518457
    bibbitybop

    Thanks 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 #519107
    Ismael

    Hi!

    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,
    Ismael

    October 15, 2015 at 1:58 pm #519300
    bibbitybop

    It worked ! You guys are great. thanks again – Joe

    October 15, 2015 at 6:14 pm #519472
    bibbitybop

    Quick 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 #519704
    Ismael

    Hi!

    It works OK when I check it. Please remove the cache / history in your mobile browser before checking the page.

    Cheers!
    Ismael

    October 16, 2015 at 3:34 pm #520047
    bibbitybop

    You are correct. Thanks again. – Joe

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Content Section blocks Mobile Menu’ is closed to new replies.