Autocollapse HTML Navbar

Hi,

I use a HTML Page, which is based on the “Page component expandable nav example” demo page. I know that you don’t include the necessary JS for the HTML components, and I figured out the mighty Burger-Menu-Collape toogle script myself :-). The Navbar itself also works like a charm.

My only problem now, is that that I want the navbar to collapse like in the React-Demos - when the window goes below 768px, I think. I know which classes to add/remove - already done for the burger menu - but I don’t know what is the best approach to do this. I of course can use the onresize of the window, but it doesn’t feel right.

Can someone point me to the right direction how to tackle this?

Thank you,
Florian

Hi @Sumpfgottheit! The subnav is hidden by default at the smallest screen sizes in the CSS, then shown at a medium breakpoint (768px) via CSS media queries. The lines responsible for this are - https://github.com/patternfly/patternfly-next/blob/master/src/patternfly/components/Page/page.scss#L89-L92

So the subnav element (.pf-c-page__subnav) should collapse automatically as you adjust the window width, as long as it doesn’t have the class .pf-m-expanded. If the subnav has the class .pf-m-expanded, it should stay open as that class should be toggled when you click the Burger-Menu-Collape button :smiley: