Adjusting the navbar breakpoint Bootstrap 3

Home Forums Older releases 0.9.x Adjusting the navbar breakpoint Bootstrap 3

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1412
    TarynMc
    Participant

    I’m trying to increase the navbar breakpoint from 768px to 991px in Bootstrap 3, however when I make this change in my css it breaks the sub menus and for the life of me I can’t figure out what I’m doing wrong. Here is the media query:

    @media (max-width: 991px) {
    .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;
    }
    }

    Any help you could offer would be appreciated.

    #1765
    admin
    Keymaster

    Hi, you will need to edit the breakpoint in all media queries that contain .navbar styles. From what I can see, all of them are the following (in v3.3.1):

    @media (min-width: 991px) {
      .navbar-right .dropdown-menu {
        right: 0;
        left: auto;
      }
      .navbar-right .dropdown-menu-left {
        right: auto;
        left: 0;
      }
    }
    
    /* ... */
    
    @media (min-width: 991px) {
      .navbar {
        border-radius: 4px;
      }
    }
    @media (min-width: 991px) {
      .navbar-header {
        float: left;
      }
    }
    
    /* ... */
    
    @media (min-width: 991px) {
      .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
      }
      .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
        visibility: visible !important;
      }
      .navbar-collapse.in {
        overflow-y: visible;
      }
      .navbar-fixed-top .navbar-collapse,
      .navbar-static-top .navbar-collapse,
      .navbar-fixed-bottom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
      }
    }
    
    /* ... */
    
    @media (min-width: 991px) {
      .container > .navbar-header,
      .container-fluid > .navbar-header,
      .container > .navbar-collapse,
      .container-fluid > .navbar-collapse {
        margin-right: 0;
        margin-left: 0;
      }
    }
    
    /* ... */
    
    @media (min-width: 991px) {
      .navbar-static-top {
        border-radius: 0;
      }
    }
    
    /* ... */
    
    @media (min-width: 991px) {
      .navbar-fixed-top,
      .navbar-fixed-bottom {
        border-radius: 0;
      }
    }
    
    /* ... */
    
    @media (min-width: 991px) {
      .navbar > .container .navbar-brand,
      .navbar > .container-fluid .navbar-brand {
        margin-left: -15px;
      }
    }
    
    /* ... */
    
    @media (min-width: 991px) {
      .navbar-toggle {
        display: none;
      }
    }
    
    /* ... */
    
    @media (max-width: 990px) {
      .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,
      .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 25px;
      }
      .navbar-nav .open .dropdown-menu > li > a {
        line-height: 20px;
      }
      .navbar-nav .open .dropdown-menu > li > a:hover,
      .navbar-nav .open .dropdown-menu > li > a:focus {
        background-image: none;
      }
    }
    @media (min-width: 991px) {
      .navbar-nav {
        float: left;
        margin: 0;
      }
      .navbar-nav > li {
        float: left;
      }
      .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
      }
    }
    
    /* ... */
    
    @media (min-width: 991px) {
      .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
      }
      .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
      }
      .navbar-form .form-control-static {
        display: inline-block;
      }
      .navbar-form .input-group {
        display: inline-table;
        vertical-align: middle;
      }
      .navbar-form .input-group .input-group-addon,
      .navbar-form .input-group .input-group-btn,
      .navbar-form .input-group .form-control {
        width: auto;
      }
      .navbar-form .input-group > .form-control {
        width: 100%;
      }
      .navbar-form .control-label {
        margin-bottom: 0;
        vertical-align: middle;
      }
      .navbar-form .radio,
      .navbar-form .checkbox {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle;
      }
      .navbar-form .radio label,
      .navbar-form .checkbox label {
        padding-left: 0;
      }
      .navbar-form .radio input[type="radio"],
      .navbar-form .checkbox input[type="checkbox"] {
        position: relative;
        margin-left: 0;
      }
      .navbar-form .has-feedback .form-control-feedback {
        top: 0;
      }
    }
    @media (max-width: 990px) {
      .navbar-form .form-group {
        margin-bottom: 5px;
      }
      .navbar-form .form-group:last-child {
        margin-bottom: 0;
      }
    }
    @media (min-width: 991px) {
      .navbar-form {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
      }
    }
    
    /* ... */
    
    @media (min-width: 991px) {
      .navbar-text {
        float: left;
        margin-right: 15px;
        margin-left: 15px;
      }
    }
    @media (min-width: 991px) {
      .navbar-left {
        float: left !important;
      }
      .navbar-right {
        float: right !important;
        margin-right: -15px;
      }
      .navbar-right ~ .navbar-right {
        margin-right: 0;
      }
    }
    
    /* ... */
    
    @media (max-width: 990px) {
      .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
      }
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
        background-color: transparent;
      }
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #555;
        background-color: #e7e7e7;
      }
      .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
      .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #ccc;
        background-color: transparent;
      }
    }
    
    /* ... */
    
    @media (max-width: 990px) {
      .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #080808;
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
        background-color: #080808;
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #9d9d9d;
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
      .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #fff;
        background-color: transparent;
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
      .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
      .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #fff;
        background-color: #080808;
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
      .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
      .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #444;
        background-color: transparent;
      }
    }
    #1830
    Cookie
    Participant

    It’s doesn’t work!
    Any other suggestion?
    Example: http://www.aloud.es/en

    #1833
    admin
    Keymaster

    It’s tested and works with v3.3.1. You are probably doing something wrong. Make sure you are editing the exact same media queries as in the example code above.

    #1838
    olimaz
    Participant
    #2255
    admin
    Keymaster

    That solution probably works for older Bootstrap versions but the complete solution (without any glitches) for v3.3.1 is to edit all those media queries I have posted above.

    #3189
    raphael
    Participant

    Hi,
    I tested you css code and works well.
    But a light question, before using your solution, I changed the breakpoint in scss file ( $grid-float-breakpoint) and doesn’t work.
    Nav collapse at the right breakpoint but in responsive navigation, dropdown menu have not a width of 100% and are hover others items:

    Any idea, thanks in advance,
    raf

    #3254
    admin
    Keymaster

    Not, sure what exactly you have tried to achieve but @screen-sm is the correct variable to edit in Bootstrap’s SCSS.

    But it might also be due to any custom CSS you’ve added. To debug it, I’d suggest starting with Bootstrap’s default CSS only and then carefully adding any custom CSS.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?