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!
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!