@sibertauthorMar 18.2019 — #> If this is not what you intend, please describe your requirement.
It should work almost exactly like this: https://jsfiddle.net/enm3z56y/33/
BUT using the Javascript (both in my example as well in yours) disable the @media query - sort of. After you use the hamburger icon to hide / show nav bar, resizing the screen will not hide / show nav menu automatically.
Your example is better though, because the behavior is perfect when the nav bar is closed. But do not work when the nav bar is opened by hamburger icon (it does not close when resizing). But the hamburger icon should always be present. Regardless of screen size.
@SempervivumMar 18.2019 — #The status of the sidebar is remembered, i. e. when the screen is narrow, the user opens the sidebar, then the window is made wide and then narrow again, the sidebar doesn't close. Is this what you mind? If so, it can be fixed by this javascript:
@sibertauthorMar 18.2019 — #> @Sempervivum#1601885 The status of the sidebar is remembered, i. e. when the screen is narrow, the user opens the sidebar, then the window is made wide and then narrow again, the sidebar doesn't close. Is this what you mind? If so, it can be fixed by this javascript:
Yes, it solves the problem with small screens, but the hamburger icon is not working with bigger screens. Probably because the class "visi" is removed on bigger screens (my guess)? ``<i> </i> if (window.innerWidth > 500) { n.classList.remove("visi"); }<i> </i>``