HI

I have created a responsive dropdown where at 580px my menu bar becomes a drop down. The problem im getting is when the menu drops down, the image slider underneath it is blocking the menu. I need my image slider to go underneath my dropdown menu when i open it. Print screens below of my problem.

 

Please solve it using bootstrap framework

Please visit this link https://goo.gl/ozV4ZD

Please solve it using bootstrap framework

Please visit this link https://goo.gl/ozV4ZD

 

And then he learns nothing. Bootstrap is a pretty horrible framework too. Not that it would solve his problem for definite. To the OP: It looks like a Z-index issue, but we won't know for sure from screenshots. We're gonna want a link to your work.

 

And then he learns nothing. Bootstrap is a pretty horrible framework too. Not that it would solve his problem for definite. To the OP: It looks like a Z-index issue, but we won't know for sure from screenshots. We're gonna want a link to your work.

Im currently working on the website i have attached my work. Yea i posted in the forum to learn for next time so any help will be fantastic.

project Anil.zip

Robert is right, it is a z-index issue, your image slider has an absolute position and a z-index of 99 added inline, that's why it sits on top of the menu. If you add a higher z-index to your ul.showing class, e.g. position:relative; z-index:999; that solves the problem.

 

hth

Robert is right, it is a z-index issue, your image slider has an absolute position and a z-index of 99 added inline, that's why it sits on top of the menu. If you add a higher z-index to your ul.showing class, e.g. position:relative; z-index:999; that solves the problem.

 

hth

Hi thanks for that it fixed my problem however the image slider does not drop below the expanded menu,

Many thanks

That's because your menu has an absolute position, and once we added the higher z-index to it, it will always be on top of elements with lower z-index. It's OK for mobile navigation to overlay all other elements when expanded, but if you need it to push the slider down, you should play with positioning. Static position (which is the default position value) on all elements would allow the content to flow naturally, so once the menu is expanded, the slider gets pushed down.

 

Here are some links for you on CSS positioning:

https://developer.mozilla.org/en/docs/Web/CSS/position

http://www.barelyfitz.com/screencast/html-training/css/positioning/

 

Play around with the elements, so you get a feel of how it all works

That's because your menu has an absolute position, and once we added the higher z-index to it, it will always be on top of elements with lower z-index. It's OK for mobile navigation to overlay all other elements when expanded, but if you need it to push the slider down, you should play with positioning. Static position (which is the default position value) on all elements would allow the content to flow naturally, so once the menu is expanded, the slider gets pushed down.

 

Here are some links for you on CSS positioning:

https://developer.mozilla.org/en/docs/Web/CSS/position

http://www.barelyfitz.com/screencast/html-training/css/positioning/

 

Play around with the elements, so you get a feel of how it all works

 

 

Bear in mind that Z indexes are also related on ancestral elements that might also have positioning and Z-index set.

For example if we have a sticky nav bar that has a z-index of 2. Then a slider down below that has a z-index of 3. Within the sticky nav you have an inner element with a z-index of 5000, the slider will still appear above it because despite that 5000 z-index because it's parent has a lower Z-index than the slider does.

 

Any time I see a high number or random number of Z-index alarm bells ring as I know whoever wrote that line of CSS has tried to brute force it and doesn't understand the z-index hierarchy in the project. I hardly ever have to go over a z-index of 4.

Edited April 9, 201610 yr by rbrtsmith