[Solved] Z-Index not overlaping other items …

[pepe_lepew]

Hello:

I have converted my html template over to html5 and flexbox and have run into, what I think, my final stumbling block, the menu. When I shrink the browser below 639px, some of the menu slides under some page items. I do not want the items to slide down or change, in fact, all what I want is the menu to overlap anything underneath it. I have the code in hopes someone can help me.

PS: I have removed the javascript ticker on the top, hence why it aint all that pretty.

http://codepen.io/lepew/pen/RWjGKX

[Gary Pickles]

Looks fine to me, checked in Chrome, Firefox and explorer, the menu always stays on top of other screen elements, I would say the menu is a bit jumpy with the gaps between the buttons.

[pepe_lepew]

When you shrink the screen to below 630px, the main area around the menu, currently has a green border with gray background, does not show 100%. The individual items show fine, although jumpy, but the rest doesn’t. I have now included my test site with absolutely everything.

http://pepelepew1962.x10.mx/flexbox/index.html

[Gary Pickles]

If you add

position: relative;
z-index: 1;

to #head_Menu

[pepe_lepew]

Thank you Sir, problem solved.

[Author]

Posts