Sticky navbar with Dropdown AND responsiveness

[ladydarkshadows]

Hello everybody!

I have created this code:

https://www.w3schools.com/code/tryit.asp?filename=FUI44FUB07JM

 

It is a mix between the W3SCHOOLS tutorials of sticky topbars and responsive topbar with dropdown menus, but applying the fixes of this previous thread.

 

It works as expected on full width window browser: The topbar gets sticky when scrolling, the dropdown works as axpected...

When resizing the browser window, a menu icon (with all links inside) is added to the topbar, but... The topbar gets sticky only if menu is closed. When opening the menu, the topbar goes to the top of the page, outside the view. When opening the menu at scroll 0, the topbar is in its position, but it doesn't get sticky when scrolling.

 

I will appreciate help. Thanks!

[dsonesuk]

You require class 'sticky' to make the nav stick to top. IF you

x.className = "navbar";

the only class that will exist is 'navbar', NO required 'sticky' class, NO sticky nav.