Sidebar auto-collapses any collapsable children on wide media - fix included

[GodzillaDaThrilla]

Figured this out while trying to create an accordion on the sidebar. I found that the standard bootstrap collapse on child elements worked fine on small screens where the sidebar collapses to the top, but on large screens the accordion menu(s) would just keep re-collapsing (again, only only large screens, collapseable elements functioned normally in mobile view).

The Problem:

The problem is with the default template, specifically this in NavMenu.cshtml:

and this in site.css:

This means that the collapse prevention is inherited by all child elements on wide screens, which makes a hamburger/accordion-style menu impossible.

The Fix:

Add an arbitrary class to the HTML - I called mine navInner:

Then modify the CSS so it targets only the sidebar specifically and not its children. I did this by replacing the ".collapse" with a combo-selector ".navInner.collapse" :

The Result:

Hey hey, it works!

[mkArtakMSFT]

Thanks for contacting us, @GodzillaDaThrilla.
Nice fine. Feel free to send us a PR and we'll happily consider it!

[javiercn]

@GodzillaDaThrilla Thanks for reaching out. What you are describing seems to be indeed a problem. Could this be fixed with just a more specific css selector? like .sidebar>.collapse?

I'm not sure why we would change our current behavior, as templates are a starting point and can be modified/updated by users. If there is a straight forward fix (like using a more specific selector) we would gladly take it I think, but otherwise, you can always modify the document to suit your needs.

[mkArtakMSFT]

Closing as we've never received a response here nor there was general community interest here.