Scroll hiding nav - make it work in real world

Hi and thanks to @Rafi for this “building block” example. But I want to make it work in a real webpage:

Two things I want to achieve:

  • get the sticky/fixed navbar below the header image and inside the grid-container (not full width)

SECOND most important

  • How can i achieve that when the menu is open, it does not hide the menu on scrolling,
    because I need the reach the (sub)items which may be outside viewport (on

here’s a codepen to play with: