how to change the z-index

I’ve made some headway, the container of the responsive menu I had as position:fixed so I think the z-index was being ignored. Changed it to position:relative and it now works as expected (in terms of it appearing above everything else).

However, I really want the responsive menu to be fixed at the top of the screen.

Does z-index not work with fixed? If not, is there an way to achieve this can anyone please advise?

Have sorted it now. Needed to add position:relative onto the responsive menu id and have the container div as fixed.

<div class="navstrip_fixed_top"><?php do_shortcode( '[responsive-menu]' ); ?></div>

.navstrip_fixed_top {
	background: #68285d;
	height:40px;
	text-align:center!important;
	line-height:40px;
	padding:0;
	-webkit-border-radius:0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	display:block;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	right:0
	}

#responsive-menu {position:relative;z-index:9999}

Just done some browser testing and actually the above only fixes the issue in firefox.

Any ideas how to fix this please?

Hi igloobob,

Unfortunately without seeing the site it’s pretty much impossible to say.

Is there any way to be able to give me access to take a look?

Many thanks

Hi,

it actually seemed to right itself, not sure how, must have been a glitch somewhere. I’ve actually not been on the job for a week or so and am picking it up again so if I notice it again I will report back.

Hi igloob,

Great news that all is sorted – please keep me updated if you need any extra help.

All the best

Hi,
I’m posting here as I’e encountered this exact issue on another site now. if I position a containing navbar as fixed, the responsive menu panel has elements such as some image above it.

I’m working on a new theme on a site so the theme isn’t live to view.

<div id="navbarfixed"><img class="logosmall" src="<?php echo get_stylesheet_directory_uri() ?>/assets/img/logo.png" /><?php do_shortcode( '[responsive-menu]' ); ?></div>

#navbarfixed {display:block;width:100%;height:50px;position:fixed;top:0;left:0;right:0;
	background:url(images/Nav-Back-Texture.jpg) repeat;
	border-bottom:5px solid #fff}
#responsive-menu {position:relative;z-index:9999}

Any ideas at all what’s wrong with my code / styles please?

Thanks!

Hi igloobob,

Unfortunately without seeing the site its almost impossible to see what the issue is/could be.

Can you enable access to the site or take images of what the exact issue is?

All the best

Hi,
thanks for the reply.
I can give you access privately, I’m on the site now so have it in maintenance mode and the new theme activated while making some changes so I can give you a login to see it now. How best to do this? Email?

Hi igloo,

Please submit this through the contact page on the site responsive dot menu.

All the best

Hi sorry for the delay, I’ve just sent details via your contact page.

Hi igloo,

No problem and thanks for the response.

I will check it and reply for you there.

All the best

I seem to have fixed it after lots of trial and error of and z-index on the responsive menu, the fixed top container and also the slider (rev slider) that was the problem.

I was surprised to find the rev slider being positioned above when I hadn’t set any custom styles on it myself.

Hi igloo,

Great you got it working before I could have a look!

All the best