I am trying to create a navigation that functions like the one on this website: Nav bar I want to create
I want my dropdown only to open en close when the header section of the dropdown is selected.
Even when changing pages or selecting other elements on the page.
I know I have to arrange this with a show hide interaction, but I can’t figure out how to correctly configure the settings.
On your project you’ve completely taken out the Nav Menu item that comes with Navbar by default.
Nav Menu is the element that works with the Navbar to hide/show those menus. Your links should be inside them. Try placing new Navbar and you’ll know it.
By the way, for you I’ve made same site myself to show how would I do it.
Your example and you are using fixed positioning which is not really necessary. You can just create a 2 column layout and place the Navbar on the left one, which in small screen will go on top itself.
There are many things to make it work better so here I’m including my example. If you want you can check it.