Question

EDIT: Tinkerbin example located in comments.

The issue I’m running into is with the fixed topbar going behind the slider (only one slide is in there now for testing). This is happening because the light green background used to outline the header is created using an :after pseudo-element on the .page-header class, like so (using SASS):

.page-header {
    position: relative;
    z-index: 0;
    padding: 35px 0;
    &:after {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        border-bottom: 5px solid $white;
        z-index: -1;
    }
}

This places the pseudo-element behind the header, but sill leaves it in front of the slider. I’ve positioned the slider relatively to place it in front of the pseudo-element, but I can’t figure out for the life of me how to adjust so the topbar is always on top. Here the code for the topbar:

.nav-cont {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    height: 40px;
    z-index: 9999;
}

Feel free to take a look at the demo site and let me know if you have any ideas. I’ve been going through Chris Coyier’s references along with some others and just can’t seem to muster up a solution.

Thanks in advance for anyone who might be able to take a look into this!

Answer 1

I figured it out.

.nav-cont is a child of the header, and because of the weird z-index necessities of the background, it is getting pulled under the slideshow. z-index is relative, so with a high z-index the navigation could only be the highest thing in the header, which was all under the slideshow.

Moving .nav-cont out of the header and giving it a high z-index solves this problem. Also, strictly speaking, semantically the navigation belongs in a <nav> element.

Fixed example