CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user502290
user502290

Reputation: 45

Not Fixed Bootstrap 3.0 Header

Note: PLEASE VIEW IN FULL SCREEN MODE. Below, the dropdown I am referring to is the li item labeled "Dropdown" in the nav menu. When you click, the dropdown is a full 100% width, depending on screen size.

http://jsfiddle.net/y2q52/1/

Trying to accomplish:

Full screen width (100%) dropdown with Bootstrap 3.0 default template.

Problem:

I have set the .dropdown-menu position to be a fixed position, with 100% width, thus allowing the dropdown in the default bootstrap 3.0 theme to be 100% depending on screen size. (See fiddle).

Scroll down the page with the dropdown enabled, the menu is broken because it is fixed to the top of the screen as you scroll. How would I go about giving the boostrap 3 dropdown a width of 100%, without breaking the dropdown (as seen in my fiddle).

**

.dropdown-menu{
    position: fixed !important;
    top: 51px !important;    
    width: 100%;
    z-index: 1000;
}

Those are the overrides I am using to override the default bootstrap 3 dropdowns. How can I have the 100% width dropdown stick with the parent nav bar?

Upvotes: 1

Views: 91

Answers (1)

Will
Will

Reputation: 4155

Use position: absolute. But in order for that to work properly, you have to override bootstrap's position: relative on the parent li.

.dropdown-menu{
    position: absolute;
    top: 51px !important;  
    left: 0;
    width: 100%;
    z-index: 1000;
}
.nav > .dropdown {
    display: block;
    position: static !important; /* !important is likely only needed in the fiddle */
}

http://jsfiddle.net/y2q52/3/ is working for me.

Upvotes: 1

Related Questions