Menus are hiding behind Slider

Question

I have a site in Bootstrap 3 here http://213.239.217.181/carboot/

I may get downvotes because people will say what have you tried or show us the code you have tried

But its been a whole day I am struggling with this issue.

On iPhone 5 , when you open menus with Toggle button, some menus are hidden behind the slider image, but they should not!

Slider is inside <section id="slider"> and I have tried every possible thing but cannot figure out how to solve my issue.

This is how it should be displaying.

Answer 1

Update your Bootstrap framework to latest.Because this may occur in deprecated framework. Mostly problem with responsive menu. I have same issue with responsive menu and it is not working in mobile devices. Same issue with your current problem.

Answer 2

The issue is that your bootstrap theme set a max-height to the nav-bar element, inside a media query, and this trim the menù:

.navbar-collapse { max-height :340px }

Override it in your CSS, just like i've done in Chrome Dev Tool :

Answer 3

You just need to do this:

.navbar-collapse { max-height: none;}

Hope this helps :)

Answer 4

Try by giving css Z-index property to say 999 to your menu container id.For ex:

Html Code:

<ul id="menu">
<li></li>
<li></li>

Css:

#menu{
z-index:999;

}