Jump to content

Sticky navbar with Dropdown AND responsiveness

Recommended Posts

Hello everybody!

I have created this code:



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!

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now