Sticky Menus and Mega Drop Down Menus

There are time when UX best practices for the web don’t always provide the best experience for the users of a website. One example would be Sticky Menus and Mega Drop Down Menus.

A Sticky Menu is a navigation bar that is stuck to the top of the screen when scrolling, usually with position:fixed;top:0; set on the menu itself. This ensures that no matter how far the user scrolls on the page, the site’s navigation is always available to the user without having to scroll to the top of the page.

Mega Drop Down Menus are a relatively new UX trend that replaces the standard drop down menus with a large drop down, making it easier for the end user to keep the drop down activated. They can also be utilized to flatten out a menu structure that has many levels of nesting.

When you combine Sticky Menus and Mega Drop Down Menus on a large screen device, you end up with an improved UX. However, on smaller screens, if the Mega Drop Down Menu is large enough, it could be hard to disengage the Mega Drop Down as there may not be any space on the site displaying that is not covered by the Mega Drop Down or the menu bar itself.

In order to make this work properly you must actively trim your menu items for all screen sizes, or simply for the smaller screen sizes that tend to cause UX issues for their users.