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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...