CODEWITHSUNDEEP
twitter-bootstrap
Gabriel Petrovay
Gabriel Petrovay

Reputation: 21944

How to set the initial state (collapsed or not) of the Bootstrap 3 navigation

I am trying to make a navbar with Bootstrap 3. But copying the first example from the Navbar section I get a navbar that is initially completely hidden on large screens. Then, if I make the screen smaller I get the mobile (stacked) version minimized. So in both cases the navbar is hidden.

If I try to remove the collapse class it is visible on the large screens, BUT also on the mobile devices (stacked version).

What should I do to make it visible on large screens and hidden on mobile devices?

I use the following HTML (jade template syntax)

nav.navbar(role='navigation)                                                                                      
    .navbar-header                                                                                                
        button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-ex1-collapse')           
            span.sr-only                                                                                          
            span.icon-bar
            span.icon-bar                                                                                         
            span.icon-bar
        a.navbar-brand(href='/')                                                                                  
            img(src='/images/logo.png')
    .collapse.navbar-collapse.navbar-ex1-collapse
        ul.nav.navbar-nav
            li: a(href='/') Link 1
            li: a(href='/') Link 2 
            li.dropdown                                                                                           
                a.dropdown-toggle(href='/', data-toggle='dropdown') Dropdown <b class="caret"></b>                
                ul.dropdown-menu                                                                                  
                    li: a(href='/') Action                                                                        
                    li: a(href='/') Another action
                    li: a(href='/') Something else here

Upvotes: 0

Views: 2472

Answers (1)

Gabriel Petrovay
Gabriel Petrovay

Reputation: 21944

I have just found the problem. I was using BS3 RC1. I downloaded the RC2 and the problem is fixed. the .collapse class is hidden on mobile and shown on desktop. The reason was a missing @media rule in the BS3 RC1 CSS (missing at least from the DevTools when inspecting the .collapse element):

@media (min-width: 768px) .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}

So it works with Bootstrap 3 RC2.

Upvotes: 1

Related Questions