$10

Navigation going behind slider below

Jill Chongva | 08/08/10 at 8:01pm | Edit

(5) Possible Answers Submitted...

• 
  Last edited:
  08/09/10
  12:00pm
  West Coast Design Co. says:

  Hey Jill,
  
  Checkout z index,
  
  z-index: 99999;
  
  Hope that helps!
  
  EDIT: possibly increase "#nav li ul" z-index: 20000; to higher a number.
  
  PS I cannot reproduce your issues on my Mac, PC and every version of IE.

  Previous versions of this answer: 08/08/10 at 8:10pm | 08/08/10 at 8:10pm | 08/08/10 at 8:15pm
• 
  Last edited:
  08/08/10
  8:16pm
  Mike Truese says:

  the #nav (menu holder) has to have a higher z-index than the slider.
  
  BUT, if you are using any sort of 'lightbox' or clone thereof, the menu should be z-indexed lower than the lightbox (otherwise the menu shows on top of lightbox)
  
  So, find the balance and set them via CSS.
• 
  Last edited:
  08/08/10
  8:19pm
  Roberto Mas says:

  add this in the css for
  
  ul.navigation
  
  position: relative;
  z-index: 9999;
  
  ul.navigation {
  float:right;
  height:32px;
  list-style:none outside none;
  margin:0;
  padding:0;
  position:relative;
  text-align:left;
  z-index:9999;
  }
  
  and then add this for #nav
  
  #nav {
  margin:0;
  padding:0;
  position:relative;
  z-index:9998;
  }
• 
  Last edited:
  08/08/10
  8:31pm
  flashingcursor says:

  Looks like you're setting z-index : 8000 on .ie-nav-wrapper which is being applied to both menus. I believe this will cause the second one to show up "higher" than the first one.
  
  Best way:
  
  1) Remove the z-index on the ie-nav-wrapper class.
  
  2) Make sure each menu is getting a unique ID. (ie: #nav-one #nav-two)
  
  3) Add CSS:
  
  #nav-one { z-index: 99999; }
  #nav-two { z-index: 99998; }
  
  
• 
  Last edited:
  08/09/10
  12:00pm
  Pippin Williamson says:

  The only element that needs a z-index of 9999 is the div wrapping the ul.navigation.
  
  IE has a bug that causes this to happen.
  
  Your z-index's need to be set as follows:
  
  

  
  
  ul.navigation {
  
    z-index: 999;
  
  }
  
  .topnavbarright {
  
    z-index: 9999;
  
  }
  
  

  
  
  That should fix it. You just have to ensure that you set both, with the topnavbarright as something like 9999.

  • 08/09/10 11:50am
    
    Jill Chongva says:

    I've used this code and the client says that it's going in front of the slide show, but BEHIND the red menu now.
    
    Help!
    
    j

  • 08/09/10 11:54am
    
    Pippin Williamson says:

    Set div#navbar to
    
    

    
    
    #navbar {
    
     position: relative;
    
     z-index: 800;
    
    }
    
                      

  • 08/11/10 10:16am
    
    Jill Chongva says:

    Problem - client says that in IE 7 the top menu in the black bar is still going behind the menu in the red bar.
    
    Help!

  • 08/11/10 2:03pm
    
    Jill Chongva says:

    Didn't work and now it's going behind the red menu in IE 8
    
    What should I try next?

  • 08/12/10 10:12am
    
    Jill Chongva says:

    Yes, it's still happening in IE7 (client is travelling so limited internet access)
    
    j

  • 08/12/10 10:35am
    
    Jill Chongva says:

    Yes, Pippin, that would be great. Email me at diva@smartwebsitediva.com