Autocollapse HTML Navbar


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,

1 Like

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 -

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:

You fancy sharing that part? I am currently in the same boat with my HTML approach and would love to get that part working in time.

btw. are you using another framework or just vanilla JS?


For anyone else getting here, I used a media query and another class to do this for me and added that to the button e.g.:

  button.navToggle {
    display: none;

  @media screen and (max-width: 767px) {
    button.navToggle {
      display: block;