CODEWITHSUNDEEP
css
dotnetnoob
dotnetnoob

Reputation: 11340

Inset shadow covered by content

I'm creating a slide out menu. I need a shadow to separate the orginal content from the menu, which is not an issue - this is done using an inset box shadow. However I also need to set a background for some of the content. The area highlighted yellow is the area where the shadow should appear, however, within the area, I have a menu constructed of UL/LI and the LI need to have a different background colour (highlighted red).

Where the LI are given a background colour, the shadow is covered.

I've searched for a workaround but haven't come up with anything as yet. Any CSS guru's suggest a solution?

enter image description here

Code below:

<nav id="mobile-nav">
    <ul>
        <li><h3>My Stuff</h3></li>
        <li><a>Nav item 1</a></li>
        <li><a>Nav item 2</a></li>
        <li><a>Nav item 3</a></li>
        <li><h3>Help & Info</h3></li>
        <li><a>Nav item 4</a></li>
        <li><a>Nav item 5</a></li>
        <li><a>Nav item 6</a></li>
    </ul>
</nav>

#mobile-nav
{
    .InnerShadow(-1.5em, 0, 1.5em, -0.75em);
    background-color:@navy;
    height:100%;
    left:-22.4rem;
    position:absolute;
    top:0;
    width: 22.4rem;
    z-index: 2;
}

#mobile-nav ul
{
    position: relative;
    z-index: 1;
}

#mobile-nav li
{
    border-bottom:solid 0.1rem @navy1;
}

#mobile-nav li:first-child
{
    border-top:0;
}

#mobile-nav li > *
{
    color:#FFF;
    line-height:3.6rem;
    height:3.6rem;
    padding:0 1rem;
}

#mobile-nav li h3
{
    background-color:@fern;
    border-top:solid 0.1rem @fernL1;
}

#mobile-nav li a
{
    border-top:solid 0.1rem @navy-1;
    display:block;
    padding-left:2rem;
}

Upvotes: 0

Views: 124

Answers (2)

dotnetnoob
dotnetnoob

Reputation: 11340

I added a new shadow div and placed in on top using the following code:

#mobile-nav .shadow
{
    .InnerShadow(-1.5rem, 0, 1.5rem, -1.5rem, 0.4);
    background-color:Transparent;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

You need to give your sidebar a greater z-index than your li elements. Ideally your sidebar should have a greater z-index than all other content on your page.

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.

ul {
    position: relative;
    z-index: 1;
}

div.sidebar {
    position: relative;
    z-index: 2;
}

Upvotes: 2

Related Questions