Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How come the navigation's box-shadow isn't showing?

How come the navigation's box-shadow isn't showing?

Problem

I want to have the header's navigation to have a box shadow. However, the box-shadow seems to be hidden by the Carousel I placed below it. I put a z-index of all children of #carousel but the box-shadow still doesn't show up.

(page snippet)

Here's what happens when I push #carousel down when I give it margin-top: 40px;

(another page snippet)

HTML


CSS

/* - - - header - - - */

header {
    background: rgb(30,27,27); /* Old browsers */

    background: -moz-linear-gradient(top,  rgba(30,27,27,1) 0%, rgba(2,2,2,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,27,27,1)), color-stop(100%,rgba(2,2,2,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%);  


    box-shadow:           0px 3px 15px rgba(50, 50, 50, .7);
        -webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
        -moz-box-shadow:    0px 3px 15px rgba(50, 50, 50, .7);

    z-index: 1000;

} 

    header h1, header li {
        float: left;
    }

    header a {
        color: #A1A1A1 ;
        font-family: arial, helvetica, verana, sans-serif;
    }

        header a:hover {
            color: #A1A1A1;
            text-decoration: none;
        }

#logo {
    width: 50px;
}

#NHS {
    margin: 1.8% 0 0 2%;
    font-size: 1.2em;
    text-transform: uppercase;
}

    #NHS a {
        color: #F6F6F6;
        letter-spacing: 2px;
    }

#nav {
    float: right;
    margin: 3% 0 0 0;

}

    #nav li {
        margin-right: 20px;
        padding: 0;
    }

    #nav li:last-of-type {
        margin-right: 0px;
    }

        #nav a {
         font-size: .8em;
         text-transform: uppercase;
         padding-top: 3px;
         font-weight: 400;
        }

        #nav a:hover {
            border-top: 1px dotted #C41D0E;
        }





/* - - - carousel - - - */

#carousel {
    margin: 40px 0 0 0;
    width: 100%;
    overflow: hidden;
    z-index: -999;
}

    #carousel .inner {
        box-sizing: border-box;
        margin-left: -50px;
        z-index: -5000;
    }

        #carousel ul {
            width: 60000px;
            height: 480px;
            z-index: -5000;
        }

            #carousel li {
                height: 480px;
                float: left;
                overflow: hidden;
                z-index: -5000;
            }

                #carousel img {
                    text-align: center;
                    width: 1375px;
                    height: auto;
                    z-index: -5000;
                }
Problem courtesy of: anita

Solution

Remember z-index only works with positioned elements. So both your carousel and header needs to have a position value other than static and then you can specify a higher z-index to the header. That way box-shadow will appear properly above the carousel.

Solution courtesy of: Rishabh

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How come the navigation's box-shadow isn't showing?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×