0

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?

cameraobscura
  • 177
  • 1
  • 2
  • 17
  • What about adding `.hidden-sm` to the parts you want to hide when the navbar collapses? – Bojangles Mar 03 '14 at 08:18
  • Can you add a minimum working (or not-working, in your case) example, either to the comment or on JSFiddle? That makes it easier for us to see exactly what the problem may be. – sredmond Mar 03 '14 at 08:18
  • http://dstest.atservers.net/ Here's the test-site. Resize the windows to the <768px and you'll see the menu items appear as if they are toggled. – cameraobscura Mar 03 '14 at 08:42

3 Answers3

2

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:

Community
  • 1
  • 1
Gabriel S.
  • 1,961
  • 2
  • 20
  • 30
2

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
1

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;
}
yousef
  • 1,240
  • 12
  • 13