17

Helo guys, I want to modify the navbar in order to collapse on @screen-md :992px;. I have modified navbar.less, but still not working and I don't know what to do.

So how can I modify the @grid-float-breakpoint variable in order to have that menu collapsed on custom media query size?

FIDDLE:

Simple Sandman
  • 900
  • 3
  • 11
  • 34
BurebistaRuler
  • 6,209
  • 11
  • 48
  • 66

4 Answers4

35

You can change the collapse point in 3.1 like this..

@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

http://www.bootply.com/120951

In Bootstrap 4, changing the breakpoint is easier. See this answer

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    Finally a solution that works properly for v3 (or, at least 3.3)!! – jmgardn2 Sep 25 '15 at 15:41
  • 2
    Just a very little objection: as medium devices START at 992px, shouldn't the media query be set at a MAX width of 991px? – Pere Sep 25 '15 at 18:07
2

In variables.less change

@grid-float-breakpoint:   @screen-sm-min

to

@grid-float-breakpoint: @screen-md-min;

or to whatever other width you would like.

It's easy and painless done this way.

phaberest
  • 3,140
  • 3
  • 32
  • 40
barduro
  • 131
  • 2
  • 3
2

Here is the code I used to solve this, just add it to your style sheet.

@media (max-width: 1992px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}
Jude Okoroafor
  • 456
  • 1
  • 5
  • 9
1

If you are using Twitter Bootstrap, the responsive collapse is already built in. You may just have to invoke it with a class in your menu. But this is the css I use in most of the Bootstrap applications I've worked with, including the one I working in right now

@media(min-width:768px) {
   .navbar-collapse {
    width: auto;
    /* more code here */
}

change the min width to the width you want it to collapse from.

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • try to put your media query into my fiddle width min width:1200px:| Not working. – BurebistaRuler Mar 11 '14 at 15:35
  • 2
    Technically I said the same as the answer above only I didn't work out the code for you, because you're supposed to do that on your own. But ok, the important thing is you got it worked out – LOTUSMS Mar 11 '14 at 17:31
  • 4
    I was looking for an answer and not a hint. thank you anyway. – BurebistaRuler Mar 12 '14 at 08:06
  • 1
    Well, I'm sorry to be the bearer of bad news but we are not supposed to be giving you the answer. It could be homework. But in general, if you dont get your gears turning, you'll never figure it out. One true fact about developing = Spend 1 hour creating and 7 debugging :) cheers – LOTUSMS Oct 28 '14 at 14:59