CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user265889
user265889

Reputation: 667

Dropdown menu not positioned correctly

I'm trying to add a dropdown menu to my navigation bar using bootstrap. The menu is displayed on top of the button and one item isn't displayed.

Here is a full jsfiddle of my html + css: jsfiddle

Here is the code that I'm using to create the dropdown:

<div class="dropdown">
        <div class="animMenu dropdown-toggle" id="imgMenu" data-toggle="dropdown">
            <div class="menuBar1"></div>
            <div class="menuBar2"></div>
            <div class="menuBar3"></div>
        </div>
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Backup Assistant</a></li>
            <li><a href="#">Settings</a></li>
        </ul>
</div>

You can access the menu by clicking the icon with the 3 bars.

The animMenu div consists of 3 bars and it turns into a cross when clicked with an animation, it's not a regular image like the other icons.

Any ideas on how to get the menu positioned underneath the button. I tried adding btn to the toggle classes but that doesn't seem to make a difference.

Upvotes: 1

Views: 1066

Answers (2)

mooga
mooga

Reputation: 3317

just add that to css

 .dropdown-menu {
  top: 50px;
 }

That's will override the bootstrap css class dropdown-menu class or you can use which is specified 

 .tab .dropdown-menu {
  top: 50px;
 }

or add new specified class to tab class

Upvotes: 0

Rakesh Shrivas
Rakesh Shrivas

Reputation: 669

**Remove overflow hidden** 
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: calc(100% - 203px);
    float: right;
    display: inline-block;
    margin-top: 5px;
    height: 50px;
}
**And write in place of it** 
div.tab {
     overflow: inherit;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: calc(100% - 203px);
    float: right;
    display: inline-block;
    margin-top: 5px;
    height: 50px;
}

after that your code working fine

Upvotes: 0

Related Questions