CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Priya Tinkle
Priya Tinkle

Reputation: 25

Drop down menu was overlapped by navbar

Hi I have a drop down menu,it will show values when it is hovered , but it was overlapped by my very next nav bar.Only first value is visible. Need some assistance , attached code as well as snapshots. enter image description here 

<nav class="navbar top-color">
  <div class="container-fluid"   ng-cloak data-ng-init="initializeMethods()">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <img class="img-responsive logo" src="css/images/Groupz.png" />
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">

        <div class="nav navbar-right" style="padding-top:6px;">
        <div class="dropdown">
        <span class="badge">5</span><img style="padding-right:10px;" src="css/images/bell1.png" />
        <img class="img-circle dropdown-toggle profilepic" data-toggle="dropdown" width="40" height="40" style="padding:1px" ng-src="{{model.profileurl}}" />

         <div class="dropdown" style="float:right;">
  <div class="caret dropdown-toggle"></div>   
  <div class="dropdown-content" style="right:0;">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>



       </div>
     </div>
   </div>
 </div>
</nav>

    <style>
        .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

    </style>


    <nav class="navbar navbar-default firstmenu">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand">Welcome - {{model.membername[0]}}</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">

      </div>
    </div>
  </nav>

Upvotes: 0

Views: 73

Answers (1)

Jan
Jan

Reputation: 130

I can't really run your code in JSFiddle. But a good way to get rid of overlapping elements is to work with z-index:. Just give the element in the foreground a higher value than the element in the background. Heres an example: https://jsfiddle.net/mx17yhn4/

Upvotes: 1

Related Questions