CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
cameraobscura
cameraobscura

Reputation: 177

How to make Bootstrap 3 navbar not collapsible

I've been searching a lot but still didn't find anything similar. If replace navbar-collapse with navbar I am getting the looks as if you've toggled the show collapsed menu items button. I've also found questions how to decrease the breakpoint at which the navbar collapses, but it's not what I need. What I need is to remove the collapsible menu generally. Any idea?

Upvotes: 0

Views: 1427

Answers (3)

yousef
yousef

Reputation: 1362

i am having this issue and i have just solved it

this will undo the collapse 

/* Undo the collapsing navbar */
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    visibility: visible !important;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0;
}

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362360

You can put the navbar links inside navbar-header, and then add some CSS to override the Bootstrap defaults..

.navbar-nav {
    margin:0;
}
.navbar-nav>li {
    float:none;
    display:inline-block;
}
.navbar-nav>li>a {
  padding-top: 15px;
  padding-bottom: 15px;
}

Demo: http://www.bootply.com/118426

Alternate (display scrollbar instead of wrapping): http://www.bootply.com/118304

Upvotes: 2

Gabriel S.
Gabriel S.

Reputation: 1943

Bootstrap is displaying collapsed elements because of the way responsive design works: The CSS code is written for the smallest viewport, and then using media queries, the design is progressively enhanced to render elements for each specific viewport.

Thus, the CSS code that is responsible for displaying the "normal" navbar (i.e. the navbar for a medium to large viewport) is wrapped around @media (min-width: 768px). That means that as soon as your viewport goes under that value, the elements revert to their original design, which is the small viewport design.

If you do not want to change the breakpoints as proposed in this question, you have a few other solutions:

Upvotes: 2

Related Questions