Force Drop Down Navigation to Show Over Image Sliders in IE7

Internet Explorer has long been the bane of every developer’s existence – different standards, slow to accept new standards, the list goes on! Unfortunately, since IE used with a high frequency in most corporate environments as well as being popular with a lot of less tech-savvy home users, it’s important that our designs work well in IE. While the Headway Visual Developer itself doesn’t work in IE, that doesn’t mean your Headway site won’t look great.  Most designs look fabulous, and if you’re using custom CSS it’s always smart to check your work in multiple browsers.

One issue that I have seen on occasion when using a third-party image slider or rotator, or even embedding a video directly below the drop-down navigation on a Headway site is that IE7 will sometimes show the navigation menu behind the rotating image or video. If you find you’re having this issue, try the code below:


body.custom div#wrapper div#header {position: relative; z-index: 999;}
body.custom div#container {position:relative;}
body.custom div#navigation {position: relative; z-index: 999;}

You may also need to set a position and z-index attribute to the container of the video or slider. If you have trouble, remember to post up your question in the forums!

Spread the word!

6 Responses

  1. Why not just make this a default in Headway? That way we don’t have to even think about it or remember to do it?

  2. Where does the code need to go? Sorry, but the reason I purchased Headway is because I don’t know that much about code. 

    • PS: I’m having this problem in Chrome with an image slider and the sub-pages in the navigation are showing up behind instead of in front of it.

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress