Jump to content

[SOLVED] Position: sticky breaks w3-bar menu

Recommended Posts

For whatever reason, anytime I use "position: sticky" in whatever form

whether it's browser supported or through the Stickyfill.js it breaks the

w3-bar navigation menu. w3schools.com obviously has a way to make

it work. But I can't. Sticky off - dropdown menu works perfect. Stick ON

and the menu button clicks but the dropdown content is not displayed.

Or at the very least it's not visible if it is.

http://dev.daellusknights.com/index.html <-- Sticky ON (broken)

http://dev.daellusknights.com/index2.html <-- Sticky OFF (works)

Is this a known issue or am I just missing something. Currently

working with MS Edge and latest Chrome on Win 10 Pro (dev)

Edited by Daellus

Share this post

Link to post
Share on other sites


For whatever reason there was an "overflow: hidden;" declaration

in the w3.css for the w3-bar class. As soon as I removed that, it

started working in Chrome, and then in Edge once I added back in

the Stickyfill script.

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...