CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user3871
user3871

Reputation: 12718

bootstrap positioning of dropdown menus

I'm creating a responsive website using bootstrap.

When the browser window narrows, the columns should collapse.

The issue is, I want dropdowns to appear when I click on heading.

I've positioned the menu absolute so I can put the z-index above.

In full width, it looks fine:

enter image description here

When columns stack, the menu is pushed to the left

enter image description here

How can I position the menu beneath the centered menu heading text? One way I can think of is to set the position of the dropdown menu to the x y position of the heading text. Is that the only way?

<div class="col-md-1">
    <div id="heading_practice">                     
        <a href="#">
            <h4>Practice Areas</h4>
        </a>
        <div class="menu_practice">
            <p>test</p>
            <p>test2</p>
        </div>
    </div>
</div>
<div class="col-md-1">  
    <div id="heading_about">
        <a href="#">
            <h4>About Us</h4>
        </a>
        <div class="menu_about">
            <p>test</p>
            <p>test2</p>
            <p>test3</p>
        </div>
    </div>
</div>

CSS

/*Menu*/
#home, #heading_practice, #heading_about, #heading_contact {
    position: relative;
    text-align:center;
}

.menu_practice, .menu_about, .menu_contact {
    position: absolute;
    padding: 10px;
    border: thin solid Silver;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    z-index: 1;
    margin-left:20px;
    text-align:left;
}

Upvotes: 2

Views: 194

Answers (1)

felixfbecker
felixfbecker

Reputation: 2363

If you're using Bootstrap, then why not use Bootstrap-Dropdowns?

http://getbootstrap.com/components/#dropdowns

It also seems like you're building a navbar there, Bootstrap has that integrated aswell with well-working support for Dropdowns:

http://getbootstrap.com/components/#navbar

Upvotes: 2

Related Questions