Mobile Menu Drops Behind Content

[Charlie Harper]

Website: http://ultimatecomics.com/

I have yet to find the z-index or plugin conflict that is causing the mobile navigation to drop behind the content.

I updated the theme to 2.0.9 and it has the Themeforest API set for updates.

Please help.

Topic

[Charlie Harper]

I think I found it, but it ain’t pretty. I am going to have to change the theme’s responsive style sheet which will probably be over written at some point.

#access li {
display: block;
float: none;
height: inherit;
padding: 0;
}

The above needs a z-index:1000 and a background.

[Jason Bobich]

Hello,

The issue is because of this you’ve added to your child theme’s style.css:

#access {
background: #333 url(../images/menu-bg.png) repeat-x;
height: 69px;
}

You’re giving the menu a fixed height across all viewport sizes, and so on mobile you’re seeing a 69px height menu with all the buttons overflowing out of it.

Instead, this would be alternate way you could wrap your styles so it only applies to everything above mobile.

@media (min-width: 768px) {
	#access {
		background: #333 url(../images/menu-bg.png) repeat-x;
		height: 69px;
	}
}

[Charlie Harper]

I cannot believe the fix was that simple. I feel like an idiot. I’ve been looking at this crap too long this past week.

Thanks so much.

[Author]

Replies