How to set the initial state (collapsed or not) of the Bootstrap 3 navigation -
i trying make navbar bootstrap 3. copying first example navbar section navbar hidden on large screens. then, if make screen smaller mobile (stacked) version minimized. in both cases navbar hidden.
if try remove collapse
class visible on large screens, on mobile devices (stacked version).
what should make visible on large screens , hidden on mobile devices?
i use 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='/') action li: a(href='/') else here
i have found problem. using bs3 rc1. downloaded rc2 , problem fixed. .collapse
class hidden on mobile , shown on desktop. reason missing @media
rule in bs3 rc1 css (missing @ least devtools when inspecting .collapse
element):
@media (min-width: 768px) .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; }
so works bootstrap 3 rc2.
Comments
Post a Comment