I made a fixed navigation bar for my wordpress blog, but it’s hiding behind my wordpress info-bar

1 Views

So I’m creating a new layout for my blog, www.thatgirlmag.com, and I want a fixed navigation bar at the top (which goes with you when you scroll down). I’ve written the CSS right (I think), but now I can’t see it because it’s behind the bar that shows up when you’re logged in to wordpress. I could just move it down, but then viewers who AREN’T logged in to wordpress will see something weird, right? It looks weird when I view it from an incognito window.

I’m assuming there has to be a better way to do this. I just want the navigation bar to sit right at the top of the VISIBLE portion of my blog. Help?

Read More

Here’s the CSS we’re looking at 

#main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
}

Also, I have the bar positioned at -10 and 110% wide because I want it to go 100% across the page (and setting width: 100% makes the nav bar just go across the width of the element, which has margins). There must be a better way to do that as well. Can someone help me? I’m not sure I’m explaining this right.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. What you’re dealing with is called z-index. You need to add a z-index value to a positioned object – like #main-nav – to place it in visibility context with other objects with or without z-index values and positions.

    Briefly (from https://developer.mozilla.org/en-US/docs/Web/CSS/z-index )

    The z-index CSS property specifies the z-order of an element and its
    descendants. When elements overlap, z-order determines which one
    covers the other. An element with a larger z-index generally covers an
    element with a lower one.

    Take a look at other answers to z-index questions on SO: https://stackoverflow.com/search?q=z-index And see Understanding z-index and The Z-Index CSS Property: A Comprehensive Look | Smashing Magazine

    For the WordPress admin bar specifically: move it down (only for logged in admins) to account for not being able to override the 9999 z-index value in WP core CSS by targeting the admin-bar div:

    body.admin-bar .header {
      position:fixed;
      top: 28px;
      z-index: 1000;
      height: 40px;
}

    See http://wahldev.com/making-fixed-nav-work-with-the-wordpress-admin-bar/

  2. Try adding a z-index to to main-nav. It would look something like this:

    #main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
z-index: 9999;
}

    I used a large number for z-index because wordpress might give a z-index to the div on top of that.