Bootstrap 3 navbar-right not collapsing at tablet width?

bootstrap 4 navbar collapse breakpoint
bootstrap 3.3.7 navbar collapse breakpoint
bootstrap navbar
bootstrap 3 change navbar collapse breakpoint
bootstrap navbar collapse on ipad
bootstrap navbar-right
bootstrap 4 navbar right
bootstrap navbar examples

I have a basic Bootstrap 3 navbar with a navbar-right dropdown but when I reduce it from large desktop to tablet size, rather than collapse it jumps below the main menu? http://www.doorsets.org.uk/apollodoors/index.html

I would guess this is to do with making a change in the media query section but I'm not sure what I need to change. Can anyone help?

Much appreciated NJ

From bootstrap's documentation on this subject:

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

See http://getbootstrap.com/components/#navbar

So if you want the nav-bar to collapse on bigger screens, you need to change the value of @grid-float-breakpoint to something that suits you, maybe 900px, or, in less @screen-md-min.

Navbar · Bootstrap, From bootstrap's documentation on this subject: Changing the collapsed mobile navbar breakpoint. The navbar collapses into its vertical mobile view when the  I am building a fairly simple static website with Bootstrap 3. In terms of navigation, I need a full-width navbar on desktop and a "hamburger" menu on mobile. So I went with Bootstrap's navbar-collapse:

@NicoFerma is correct and the "grid-float-breakpoint" is the variable to change if configuring a new boostrap install. However, if you don't want to install a new version of bootstap, this simple find/replace in the boostrap.min.css/boostrap.css file has just worked for me:

Find

@media(min-width:768px

Replace with

@media(min-width:922px

*Modify the min-width px to your preferred nav-bar swithchpoint

Change the Bootstrap NavBar Breakpoint (Example), Use optional containers to limit their horizontal width. Responsive behavior depends on our Collapse JavaScript plugin. Although it's not required, you can wrap a navbar in a .container to center it on a page or add one they follow a sibling element like a .navbar-brand , they'll automatically be aligned to the far right. In 3.1, option 1 of customizing @grid-float-breakpoint will still work, as the Less still uses this variable to produce the updated CSS. My preferred technique for amending the variable is to use the source Less in my project, and override variables individually in a new LESS file that imports bootstrap.less - that way, you can upgrade to newer versions of Bootstrap without losing any

 @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            /*margin: 7.5px -15px;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

Bootstrap: navbar collapse's too early! - HTML & CSS, A protip by iatek about css, responsive, mobile, css3, bootstrap, collapse into it's mobile state too soon (at to wide of a screen width), or too By default, Bootstrap collapses (vertically stacks) the navbar at 768 .navbar-left,.navbar-​right { float: none !important; } .navbar-toggle This is not working for me. A collapse navigation bar in bootstrap is the combination of collapse in the Navbar. Navbar content can hide and show according to the requirement of the user using collapse Navbar. Bootstrap Collapse Navbar becomes a responsive navigation bar for screen size.

Bootstrap 4 Navbar Breakpoint - WDstack, I have tried to override the .collapse in my css with: @media (max-width: 320px) but @media screen and (max-width:768px) and (min-width:440px) { .navbar-​right { float: What would my alternative be for a 100% responsive framework. These breakpoints bear no relation to what is going on in your page as seen with​  The problem is with the point at which the navbar collapses. By default, Bootstrap collapses at 768px. If you increase this, your navbar will collapse sooner and your problem will disappear.

How To Create a Collapsed Sidebar, In Bootstrap 4, the Navbar is responsive and utilizes flexbox to make alignment of Navbar content much easier. The 3.x Navbar collapsed into its vertical mobile layout when the viewport Not ideal for quick responsive design. sm widths <​576px; navbar-expand-md = collapses below md widths <768px  The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands.

SOLVED: My Bootstrap Navbar Toggle is Not Toggling!, How TO - Collapse Sidebar width: 0; /* 0 width - change this with JavaScript */ Position and style the close button (top right corner) */ Step 3) Add JavaScript​: Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars. reviewed to avoid errors, but we cannot warrant full correctness of all content. By default, Bootstrap collapses (vertically stacks) the navbar at 768 pixels. You can easily change this threshold using a simple CSS media query. For example, here we change the breakpoint threshold to 990 pixels, causing the navbar to collapse sooner.. @media (max-width: 990px) { .navbar-header { float: none; } .navbar-toggle { display: block

Comments
  • I've done a find/replace across my entire site and can't find "grid-float-breakpoint". How do I edit this setting and which core file should it be within?
  • It depends how you are integrating Bootstrap with your site. Are you linking to the Bootstrap CDN or did you download files from the Bootstrap website? If you went with the second option, you can redownload a customized Bootstrap from here after modifying @grid-float-breakpoint.
  • I have downloaded Bootstrap from getbootstrap.com/getting-started which gives me CSS, FONTS and JS folders and associated files. There is no @grid-float-breakpoint in any of it, which is most confusing considering the above advice.
  • OK, instead of downloading it from there, go to getbootstrap.com/customize and modify the @grid-float-breakpoint variable. Then click "Compile and Download" at the bottom of the page and use this version instead of the previous one.
  • Just to clarify, @grid-float-breakpoint is a LESS variable which are not available in the CSS but used to produce the CSS files. That is why you won't find it in CSS, Fonts and JS folders.