<p dir="auto">When I expand a collapsible navbar and after that resize the browser window, the navbar-collapse element keeps the class "in". In my opinion the class "in" should be removed if the width is wide enough for the navbar not to be collapsed because when I call the page with a wide browser the navbar-collapse also does not get the "in" class.</p>
<p dir="auto">Currently this is duped a few times over: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="21632511" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/11243" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/11243/hovercard" href="https://github.com/twbs/bootstrap/issues/11243">#11243</a>, <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="21882564" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/11301" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/11301/hovercard" href="https://github.com/twbs/bootstrap/issues/11301">#11301</a>, and <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="22230647" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/11382" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/11382/hovercard" href="https://github.com/twbs/bootstrap/issues/11382">#11382</a>—but the issue is described differently everywhere. This should clear things up and help us figure out what to do to fix it.</p>
<h4 dir="auto">Problem</h4>
<p dir="auto">Starting with a narrow viewport, one with the collapsed navbar contents, open the menu, then resize to full-width with all navbar contents visible. Shrinking the viewport back to the narrow size still shows the un-collapsed navbar contents.</p>
<p dir="auto">(Btw, this is currently visible in the docs.)</p>
<h4 dir="auto">Why this happens</h4>
<p dir="auto">We're using the collapse plugin to do this. Right now it has no idea about the dimensions of your viewport. All it does is toggle the appropriate classes based on clicks—click to open, click to hide.</p>
<p dir="auto">Our CSS utilizes those changes in classes from the plugin to style the menu accordingly. The CSS has no way to remove the <code class="notranslate">.in</code> class that the JS adds.</p>
<h4 dir="auto">Fix</h4>
<p dir="auto">We need the JS plugin to be updated to detect the viewport changes and remove the class. I don't know when or how this could happen, but that's the only solution. Will need to hear from <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/fat/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/fat">@fat</a> or anyone else with more JS-fu.</p>