Change boostrap navbar collapse breakpoint

Question

I've tried several solutions, but always have same result. Collapse breakpoint is changed, but I don't see the button so I can't collapse my menu. I'm using BS 3.3.7. Can you please look on the code ? Thank you so much!

HTML:

 <nav class="navbar navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="logo"></a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">abc</a></li>
            <li><a href="aaa.html">aaa</a></li>
            <li class="active"><a href="ccc.html">ccc</a></li>
            <li><a href="sss.html">rrr</a></li>
            <li><a href="ccc.html">eee</a></li>
            <li><a href="vvv.html">sss</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav><!-- /.navbar-->

SCSS

@media screen and (max-width: 991px) {   

.navbar .navbar-nav li .dropdown {
    width: 100%;
    margin-bottom: 30px;
}

.navbar .navbar-nav li .cart {
    float: left;
}

.navbar .navbar-header {
    margin-top: 0px;
}

.navbar .navbar-header {
    width: 100%;
    margin: 0px;
}

.navbar .navbar-collapse {
    width: 100%;
}

.navbar-toggle {
    float: right;
    margin-top: 20px;
}

.navbar .navbar-header .navbar-brand {
    padding: 5px 15px;
}

.navbar-toggle {
    border: 1px solid #e1e1e1;
    margin-right: 0px;

    .icon-bar {
        background: $light;
    }
}   

.navbar .navbar-top {
    float: left;

    .cart {
        float: left;
        width: 100%;
    }

    .btn-group {
        float: left;
        width: 100%;
        margin-left: 0px;
        margin-top: 10px;

        .dropdown-toggle {
            float: left;
        }
    }
}

.navbar .navbar-nav {
    width: 100%;
    float: left;
    margin: 0px;
}

.navbar .navbar-collapse {
    margin: 0px;
    padding: 0px;
}

.navbar .navbar-nav li {
    padding: 10px 0px;
}

.navbar .navbar-header .navbar-brand {
    padding-left: 0px;
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: auto;
}

.navbar .navbar-nav li {
    .dropdown {

        .dropbtn {
            padding-left: 0px;
        }

        .dropdown-content {
            display: block;
            position: relative;
            box-shadow: none;
            background: #fff;

            a {
                padding-left: 25px;

                &:after {
                    left:5px;
                }
            }

            a:last-child {
                padding-bottom: 0px;

                &:after {
                    top: 10px;
                }
            }
        }
    }
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: inherit;
    overflow-x: hidden;
}
}

score 1 · Accepted Answer · edited May 23 '17 at 11:53

According to Bootstrap 3 Navbar Collapse

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

Just change 991px by 1199px for md sizes.

Yes, this works, but as usually, it hides also button, so I can't click and open my menu, as there is no button — JZK, Dec 04 '16 at 12:35
bootply works great but I had still the same problem, but finally it's fixed. I've putted together your code and mine (one which is above) setted it for 991px and everything works great. Despite I have no idea how))... nevermind, thank you! ... — JZK, Dec 04 '16 at 16:47

Change boostrap navbar collapse breakpoint

1 Answers1