Change Bootstrap's mobile navbar breakpoint
<p>I'm sorry if the title is confusing, the actual problem is very simple to understand.</p>

<p>I have a bootstrap responsive navbar which toggles between mobile and desktop view at 768px breakpoint.</p>

<p>However, I would like it to keep the mobile navbar til 992px breakpoint.</p>

<p>Because above 768px wide, this is how the menu looks</p>

<p><a href="https://i.stack.imgur.com/ifMI1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ifMI1.jpg" alt="enter image description here"></a></p>

<p>So I added a media query to the css to fix that</p>

<pre><code>@media (min-width: 768px) and (max-width: 992px) {
    .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-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&gt;li {
        float: none;
    }
    .navbar-nav&gt;li&gt;a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}
</code></pre>

<p>Now the mobile menu toggles at 992px but the sub-menus are not displaying in their correct position above 768px and below 992px</p>

<p><a href="https://i.stack.imgur.com/a9gE7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a9gE7.jpg" alt="enter image description here"></a></p>

<p>How can I fix that?</p>

<p>And am I doing the media queries correctly?</p>

<p><strong>jsFiddle:</strong> <a href="https://jsfiddle.net/8zne82d2/7/" rel="nofollow noreferrer">https://jsfiddle.net/8zne82d2/7/</a></p>