Bootstrap 3 - disable navbar collapse

Question

This is my simple navbar    lt div class  navbar navbar-fixed-top myfont  role  navigation  gt       lt div class    gt           lt ul class  nav navbar-nav navbar-left  gt               lt li gt                   lt a class  navbar-brand  href     gt                       lt img src  assets img logo png   gt                   lt  a gt               lt  li gt               lt li gt                   lt button class  btn btn-navbar  gt                       lt i class  fa fa-edit  gt  lt  i gt                      Create                   lt  button gt               lt  li gt           lt  ul gt       lt  div gt       lt ul class  nav navbar-nav navbar-right  gt           lt li data-match-route     gt  lt a href    page-one  gt Login lt  a gt  lt  li gt           lt li data-match-route     gt  lt a href    page-two sub-a  gt Signup lt  a gt  lt  li gt       lt  ul gt   lt  div gt    I just would like to prevent this to collapse  cause I don t need it  how to do   I would like to avoid writing 300K lines of CSS for overriding the default styles   Any suggestion

User · Answer

The following solution worked for me in Bootstrap 3.3.4:

CSS:

/*no collapse*/

.navbar-collapse.collapse.off {
    display: block!important;
}
.navbar-collapse.collapse.off ul {
    margin: 0;
    padding: 0;
}

.navbar-nav.no-collapse>li,
.navbar-nav.no-collapse {
    float: left !important;
}

.navbar-right.no-collapse {
    float: right!important;
}

then add the .no-collapse class to each of the lists and the .off class to the main container. Here is an example written in jade:

nav.navbar.navbar-default.navbar-fixed-top
        .container-fluid
            .collapse.navbar-collapse.off
                ul.nav.navbar-nav.no-collapse
                    li
                        a(href='#' class='glyph')
                            i(class='glyphicon glyphicon-info-sign')
                ul.nav.navbar-nav.navbar-right.no-collapse
                    li.dropdown
                        a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false')
                            | Tools
                            span.caret
                        ul.dropdown-menu(role='menu')
                            li
                                a(href='#') Tool #1
                    li
                        a(href='#')
                            | Logout

User · Answer

After close examining  not 300k lines but there are around 3-4 CSS properties that you need to override    navbar-collapse collapse     display  block important      navbar-nav gt li   navbar-nav     float  left  important      navbar-nav navbar-right last-child     margin-right  -15px  important      navbar-right     float  right important      And with this your menu won t collapse   DEMO  jsfiddle   EXPLANATION  The four CSS properties do the respective    The default  collapse property in bootstrap hides the right-side of the menu for tablets landscape  and phones and instead a toggle button is displayed to hide show it  Thus this property overrides the default and persistently shows those elements  For the right-side menu to appear on the same line along with the left-side  we need the left-side to be floating left  This property is present by default in bootstrap but not on tablet portrait  to phone resolution  You can skip this one  it s likely to not affect your overall navbar  This keeps the right-side menu to the right while the inner elements  li  will follow the property 2  So we have left-side float left and right-side float right which brings them into one line

User · Answer

The nabvar will collapse on small devices  The point of collapsing is defined by  grid-float-breakpoint in variables  By default this will by before 768px  For screens below the 768 pixels screen width  the navbar will look like   It s possible to change the  grid-float-breakpoint in variables less and recompile Bootstrap  When doing this you also will have to change  screen-xs-max in navbar less  You will have to set this value to your new  grid-float-breakpoint -1  See also  https   github com twbs bootstrap pull 10465  This is needed to change navbar forms and dropdowns at the  grid-float-breakpoint to their mobile version too  Easiest way is to customize bootstrap find variable    grid-float-breakpoint  which is set to  screen-sm  you can change it according to your needs  Hope it helps   For SAAS Users add your custom variables like  grid-float-breakpoint  0px  before the  import  quot bootstrap scss quot

User · Answer

Here s an approach that leaves the default collapse behavior unchanged while allowing a new section of navigation to always remain visible  Its an augmentation of navbar  navbar-header-menu is a CSS class I have created and is not part of Bootstrap proper   Place this in the navbar-header element after navbar-brand    lt div class  navbar-header-menu  gt       lt ul class  nav navbar-nav  gt           lt li class  active  gt  lt a href     gt I m always visible lt  a gt  lt  li gt       lt  ul gt       lt form class  navbar-form  role  search  gt           lt div class  form-group  gt               lt input type  text  class  form-control  placeholder  Search  gt           lt  div gt           lt button type  submit  class  btn btn-default  gt Submit lt  button gt       lt  form gt   lt  div gt    Add this CSS    navbar-header-menu       float  left          navbar-header-menu  gt   navbar-nav           float  left          margin  0                  navbar-header-menu  gt   navbar-nav  gt  li               float  left                          navbar-header-menu  gt   navbar-nav  gt  li  gt  a                   padding-top  15px                  padding-bottom  15px                          navbar-header-menu  gt   navbar-nav  open  dropdown-menu               position  absolute              float  left              width  auto              margin-top  0              background-color   fff              border  1px solid  ccc              border  1px solid rgba 0 0 0  15               -webkit-box-shadow  0 6px 12px rgba 0 0 0  175               box-shadow  0 6px 12px rgba 0 0 0  175                   navbar-header-menu  gt   navbar-form           float  left          width  auto          padding-top  0          padding-bottom  0          margin-right  0          margin-left  0          border  0          -webkit-box-shadow  none          box-shadow  none                  navbar-header-menu  gt   navbar-form  gt   form-group               display  inline-block              margin-bottom  0              vertical-align  middle                  navbar-header-menu  gt   navbar-left           float  left              navbar-header-menu  gt   navbar-right           float  right  important              navbar-header-menu  gt    navbar-right last-child           margin-right  -15px  important          Check the fiddle  http   jsfiddle net L2txunqo   Caveat  navbar-right can be used to sort elements visually but is not guaranteed to pull the element to the furthest right portion of the screen  The fiddle demonstrates that behavior with the navbar-form

User · Answer

Another way is to simply remove collapse navbar-collapse from the markup  Example with Bootstrap 3 3 7   x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   x000D   lt nav class  navbar navbar-atp  gt  x000D     lt div class  container-fluid  gt  x000D       lt div class    gt  x000D         lt ul class  nav navbar-nav nav-custom  gt  x000D           lt li gt  x000D             lt a href     id  sidebar-btn  gt  lt span class  fa fa-bars  gt Toggle btn lt  span gt  lt  a gt  x000D           lt  li gt  x000D         lt  ul gt  x000D         lt ul class  nav navbar-nav navbar-right  gt  x000D           lt li gt Nav item lt  li gt  x000D         lt  ul gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

If you re not using the less version  here is the line you need to change    media  max-width  767px       Change this to 0       navbar-nav  open  dropdown-menu       position  static      float  none      width  auto      margin-top  0      background-color  transparent      border  0      box-shadow  none         navbar-nav  open  dropdown-menu  gt  li  gt  a     navbar-nav  open  dropdown-menu  dropdown-header       padding  5px 15px 5px 25px         navbar-nav  open  dropdown-menu  gt  li  gt  a       line-height  20px         navbar-nav  open  dropdown-menu  gt  li  gt  a hover     navbar-nav  open  dropdown-menu  gt  li  gt  a focus       background-image  none

[css] Bootstrap 3 - disable navbar collapse

Examples related to css

Examples related to twitter-bootstrap-3

Examples related to navbar

Examples related to collapse

Examples related to preventdefault