Autocollapse HTML Navbar

Support
#1

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

1 Like
#2

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:

#3

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?

~Cheers

#4

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;
    }
  }