Search code examples
jquerycssz-index

Fixed navbar brings dropdown to front

I am trying to make a fixed navigation bar with animated dropdown, therefore I used z-index stacking instead of display:none. However, this dropdown inherits the z-index property from the navigation bar, which has the stacking index of 99999. Hence it brings the dropdown menu to front, overlapping other contents. As a result, when the users move their cursor to the spot where the dropdown occupies, it appears. I posted an image for a better illustration.

enter image description here

HTML Markup

<li class="ic-quick-nav-items ic-quick-nav-items--dropdown">
    <button class="ic-quick-nav-dropdown">Listening <i class="fa fa-chevron-down"></i></button>
    <ul class="ic-dropdown">
        <li class="ic-dropdown-items"><a href="#" class="ic-dropdown-links" tabindex="-1">Listening Practice</a></li>
         <li class="ic-dropdown-items"><a href="#" class="ic-dropdown-links" tabindex="-1">Tips & Tricks</a></li>
     </ul></li>

This is my CSS code for the whole navbar:

#ic-nav-border {
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}
.ic-quick-nav-items--dropdown {
    position:relative;
}
.ic-quick-nav-items--dropdown:hover  .ic-dropdown {
    visibility:visible;
    opacity:1;
    z-index:5;
    top:42px;
}
.ic-quick-nav-dropdown {
    background-color:transparent;
    border:0;
    font-size:16px;
    padding:11.5px;
    width:100%;
    text-align:center;
    cursor:pointer;
    transition:color 0.4s;
    -o-transition:color 0.4s;
    -moz-transition:color 0.4s;
    -webkit-transition:color 0.4s;
}
.ic-quick-nav-dropdown:hover, .ic-quick-nav-dropdown:active, .ic-quick-nav-dropdown:focus {
    color:rgba(215, 84, 77, 1);
}
.ic-dropdown {
    position:absolute;
    left:0;
    top:80px;
    list-style:none;
    visibility: none;
    opacity:0;
    padding:20px;
    min-width:120px;
    z-index:-1;
    white-space: nowrap;
    display:inline-block;
    border:1px solid #eee;
    background-color: rgba(255,255,255,1);
    transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

Fixed navbar set by jQuery, results in inline CSS code

<div class="ic-header-part-wrapper header-sticky theme-light" id="ic-nav-border" style="position: fixed; z-index: 99999; top: 0px; left: 0px; right: 0px;">

What stacking solution should I apply in order to make dropdown stays behind and the navbar stays fixed at the top?

Edit: Actually, the whole navigation is sticky, therefore it has two state: static and fixed. In static state it works fine, however in fixed state it does not

Solution

  • To be honest, it looks like the only error there is the incorrect property value on visibility for .ic-dropdown, as you stated none where should be hidden.

    Therefore, your visibility is not applying, and the element is only "hidden" because of the opacity, which holds the pointer-events. So when you mouse over the space it occupies, it still triggers the animation.

    So fix the .ic-dropdown{visibility:hidden} and it should work OK. You can get rid of all z-indexes there, I'm still not sure why are you using them to begin with.