CODEWITHSUNDEEP
htmlcss
SorryEh
SorryEh

Reputation: 928

Dropdown Menu hides behind div

My drop down menu in mobile view hides behind my banner. I can't seem to fix it. I have added the z-index, and I've gone as high as 999 and still no difference.

this is the test page

Here is HTML:

<li class="dropdown">
     <a class="dropdown-toggle provinces-btn" data-toggle="dropdown">Select Province<span class="caret"></span></a> 
     <ul class="dropdown-menu">
         <li><a href="#">Alberta</a></li>
         <li><a href="#">British Columbia</a></li>
         <li><a href="#">Manitoba</a></li>
         <li><a href="#">New Brunswick</a></li>
         <li><a href="#">Newfoundland and Labrador</a></li>
         <li><a href="#">Nova Scotia</a></li>
         <li><a href="#">Nunavut</a></li>
         <li><a href="#">Ontario</a></li>
         <li><a href="#">Prince Edward Island</a></li>
         <li><a href="#">Quebec</a></li>
         <li><a href="#">Saskatchewan</a></li>

     </ul>  
   </li>

Here is CSS:

.dropdown-menu {
    left: 40% !important;
    margin-left: -30px;
   z-index: 50;
}


@media screen and (max-width: 768px) {
.provinces-btn {

    width: 100%;
    margin-top: 1px;
    border-radius: 12px;
    background-color: #3498db;
    border-color: rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    color: #FFF !important;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    padding: 10px 30px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom-width: 3px;
    text-decoration: none;
    z-index: 60;



}

    .provinces-btn:hover, .provinces-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }

    .provinces-btn ul{
        margin: 0 auto;
    }

}

@media screen and (max-width: 604px) {
.provinces-btn {

    width: 100%;
    margin-top: 1px;
    margin-left: 15px;
    border-radius: 12px;
    background-color: #3498db;
    border-color: rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    color: #FFF !important;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    padding: 10px 30px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom-width: 3px;
    text-decoration: none;
    z-index: 60;

   }

       .provinces-btn:hover, .provinces-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }
    .provinces-btn ul{
        margin: 0 auto;
    }

 }

Other CSS with z-index that I'm not sure if it is affecting it:

nav {
        padding: 0;
        position:relative;
        z-index:10;
        height: 0;
    }

    .showMenu {
        display: block;
        background: url() no-repeat center;
        background-size: 48px 48px;
        height: 80px;
        right: 0;
        top: 0;
        text-indent: -999999px;
        font-size: 0;
        position: absolute;
        z-index:11;
        border-left: 1px solid #DDDDDD;

    }

Upvotes: 4

Views: 5421

Answers (3)

CORTIZ
CORTIZ

Reputation: 101

Don't make the overflow hidden. If it is set to hidden, it will not allow your new divs (inside the parent element where overflow:hidden) to pop up or overlap other divs.

Upvotes: 0

elreeda
elreeda

Reputation: 4597

the problem isnt z-index problem the real problem is your header, just change

header {
    width: 100%;
    height: auto;
    background: #FFFFFF;
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    margin-bottom: 2%;
}

To

header {
    width: 100%;
    height: auto;
    background: #FFFFFF;
    margin-bottom: 2%;
}

Upvotes: 3

Sebastian Olsen
Sebastian Olsen

Reputation: 10878

Z-Index only works on positioned elements, try adding this to your .dropdown-menu:

position: relative;

Upvotes: 2

Related Questions