Sticky Menus: Types and Best Practices for Ecommerce Sites

Introduction

Modern web design has a lot of moving pieces, but it also has a few cornerstone or staple elements that you can see almost everywhere. 

Sticky menus are some of the most important ecommerce site elements, and for good reason.

Today, let’s break down what sticky menus are, the types of sticky menus and sticky navbars, and the best practices to effectively use sticky menus on your ecommerce website.

‍

What Are Sticky Menus?

A sticky menu is a fixed navigation menu on a given web page. True to its name, a sticky menu “sticks” by staying visible no matter where a site visitor may navigate. For instance, if a site visitor scrolls down the page, a sticky menu at the top of the screen will stick around and remain clickable for the duration of the visitor’s experience.

Sticky menus may sound a little goofy in their name, but they’re a cornerstone of modern web design. In fact, persistent navigation bars, which are sometimes called sticky headers, are found on many popular business and educational websites.

Sticky menus often appear at the top of the page, but designers can customize sticky elements in CSS, Javascript, and other languages. They all stay with a user as the user scrolls down, up, or to the side of a page — hence the term sticky navigation. They’re popular on all WordPress and HTML sites, especially those with drop-down menus or homepages with lots of elements.

You might also recognize these as sidebars or mega menu screens that scroll up or down on smaller screens. Regardless, these are core elements of browser window design, and they positively impact bounce rate, conversion rate, and more.

‍

What Are the Main Types of Sticky Menus?

While sticky menus can be designed for unique challenges or visitor needs, they can broadly be categorized into three primary types.

Fixed Left-Side Navigation

Fixed left-side navigation sticky menus are exactly what they sound like — sticky menus oriented in a bar shape that extend down the left side of one’s screen. 

Kayak is an excellent example of a website with a left-side navigation sticky menu. When you try to book something on Kayak, you can click on the left-hand sticky menu and immediately go to flights, cars, and hotel rooms.

Fixed Right-Side Navigation

Fixed right-side navigation sticky menus are the opposite. They are right-aligned fixed navigation bars. In most cases, brands set up fixed right-hand sticky menus for things like similar blog posts, videos, or other related resources.

YouTube's site is an example of fixed right-side navigation sticky menus in action. When you click on a YouTube video, you can see a list of recommended videos on the right-hand side. These are always visible so you can quickly click to another piece of media when you finish your current video.

Fixed Top Navigation

Lastly, fixed-top navigation sticky menus are fixed to the top of a user's browser as they navigate through a web page, allowing them to return to it for easier navigation.

Fixed top navigation sticky menus are beneficial if you want to keep your website's main pages or buttons visible at all times. For instance, a fixed top navigation sticky menu with pages for “Contact Us,” “About Us,” and “Products” can be helpful to users so they don’t have to scroll back to the top after going down an extensive web page.

These fixed menus are buildable with WordPress plugins and other widgets, often in accessible templates.

‍

What Are Some Best Practices for Sticky Menus?

Sticky menus might be everywhere, but everyone has encountered a website where they have been leveraged improperly. For instance, maybe you’ve visited an e-commerce site in the past where the sticky menu at the top of the screen bounces around or is too large to allow easy navigation.

This is one example of the importance of mastering sticky menu placement and usage. Let’s look at some of the best practices for sticky menus to make sure they help, rather than hinder, your target website visitors.

Keep the Motion Minimal

First and foremost, keep any motion in your sticky headers minimal and responsive (and no motion is oftentimes better than anything else). Animation is distracting and can make navigation a pain. Many visitors don’t like sticky headers because they’ve encountered menus that bounce around and cover-up buttons they want to click when they scroll too far down the screen.

It’s also a good idea to keep any motion natural and responsive. Users hate when menus move without any prodding from their fingertips or mice. Therefore, consider designing sticky menus that can be dragged or moved around when someone clicks and holds on their borders.

As with many things, testing is a good way to determine if your headers bounce around or move too much. Set up your sticky menus, go to the website on a desktop and mobile device, and ask yourself if they’re too bouncy. If so, continue tweaking the settings until they are just right.

Maximize Your Content-to-Chrome Ratio

Next, maximize the so-called “content to chrome” ratio by keeping any sticky menus small. 

Sticky headers take up a lot of screen size constantly; that screen size could easily be used for some other type of content. Thus, you need to use the space responsibly and carefully.

In a nutshell, this means designing sticky menus so they take up the smallest amount of space possible while still allowing readable and clickable buttons. You’ll have to practice with some trial and error here to get the ratio right. 

For example, on most touchscreen devices, all tap targets – such as sticky menu buttons – should generally be a minimum of one centimeter by one centimeter, and all text should be 16 point.

Note that this advice is even more important for mobile visitors. More than half of all Internet traffic comes from mobile visitors, so you need to ensure your site is mobile optimized; that includes ensuring that sticky menus aren’t a pain to navigate through on an iPhone or Android device.

Choose Contrasting Colors for Easy Viewing

Lastly, and perhaps most importantly, remember to design your sticky menus with colors that contrast with the background color of the screen or surrounding content. 

This will ensure easy viewing for any site visitors, plus make your sticky menus stand out as important, easy-to-use navigational tools.

To do this effectively, determine if there’s enough visual differentiation between the header you have in mind that the content everywhere else on the page. Remember, your sticky headers and menus will appear on practically every page, so there needs to be enough visual and color contrast everywhere, not just on the landing page.

For the best results, pick a sticky header background in an opaque color that’s different from the background of your primary content areas, like the main screen or center of a page. A skilled UX designer may be able to help with this task.

‍

Why Use a Sticky Menu?

Sticky menus can be used for many reasons and purposes, but the primary purpose is navigation.

Above all else, sticky menus bring important core website pages, buttons, and functionalities everywhere a visitor goes. For example, someone might scroll down a long blog post and want to return to a product page. If a sticky header follows them down the page, they don’t have to scroll back up to accomplish their goal.

In addition, sticky menus help recommend content to users as they consume one piece after another. In this sense, sticky menus can help drive engagement and travel throughout your site.

Someone might finish a blog post, for example, then see a recommendation for another blog post and click to it on a right-aligned sticky menu. This can also increase sales if your sticky menus regularly recommend excellent products to those browsing your site looking for something to buy.

Overall, though, the sky's the limit. Sticky menus are tools and shouldn't be scattered thoughtlessly around your site — but if you use them smartly and wisely, they can seriously improve the navigability of your web pages and make your website much more fun to scroll through.

‍

The Bottom Line

In the end, sticky menus are inherently useful website elements that you can and should use to improve navigation for your target audience members. Whether you have a single sticky menu at the top of the screen or several sticky menus across your site, it can be tricky to determine the best type of sticky menu to use and where to place it.

That’s where Prismfly comes in. Our knowledgeable conversion rate optimization experts can help you revamp and rejuvenate your website from the ground up. 

Not only can we help you master CRO, but we’ll also lend our UX and UI design expertise to your site. Contact us today.