Close opened navbar content on window resize

[mdo]

Currently this is duped a few times over: #11243, #11301, and #11382—but the issue is described differently everywhere. This should clear things up and help us figure out what to do to fix it.

Problem

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.

(Btw, this is currently visible in the docs.)

Why this happens

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.

Our CSS utilizes those changes in classes from the plugin to style the menu accordingly. The CSS has no way to remove the .in class that the JS adds.

Fix

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 @fat or anyone else with more JS-fu.

[fat]

hm… well our nav is just using our default collapse plugin… which shouldn't be aware of viewport changes. Because this is a pretty specific nav related case.

Also, there's no bug in our docs afaik… there's only a bug/unexpected bahior if you have a dropdown in your navbar?

At any rate… the js is super easy bb:

$(window).on('resize', function () {
  if (window.innerWidth > tabletSize) $('.bs-navbar-collapse').collapse('hide')
})

[fat]

if people have that bug, i'd recommend just adding that snippet… we could add it to the bottom of the the collapse plugin but it's kinda gross. your call tho, let me know if you'd like me to add it.

[mdo]

Nah, punting on this for now.

[NazarenoL]

I lost at least one hour trying to decipher why my header breaks after shrinking, opening the menu and then enlarging. I'm now using the @fat script line, and it fixed it.

I don't think that this should be included with the collapse plugin, but with the bootstrap js that applies collapse to the menus.

[sschenk]

Why is this closed what's the solution for v3.6?