Our Verdict - Take sticky menus with a pinch of salt. They are good for longer pages, specific demographics, and actionable websites. Use them carefully and ensure that you don’t let any design missteps happen that lead to a poor user experience.Â
When it comes to navigation, it is true that sticky menus have been found to create faster click rates . A study conducted by Hyrum Denney way back in 2012, established that participants were able to navigate 22% more quickly while using sticky menus.Â
Source This has created a kind of a perception that it must be the first and last stop for great conversions.Â
However, seamless navigation has a variety of other factors associated with it, according to Baymard Institute . These include brilliant information architecture, precise hierarchy and labeling, curated category pages and a mobile first approach amongst several others.Â
To take this a little further, there’s enough data to say that CRO is made or broken by various other factors, other than navigation. Take the instance of how product descriptions are written (and that 10% of the largest eCommerce sites don’t meet their customers’ information needs). Or how 93% claim the visual treatment to be the main reason behind their purchasing decision. Or how according to Hubspot, increasing the number of landing pages from 10 to 15 can increase leads by 55%.Â
You get our point. Sticky menus have the ability to amp up customer experience within a specific context. But in the larger picture, you’d need to get more factors right to convert. In this piece though, we’ll go deeper into what you MUST ABSOLUTELY AVOID if you do choose to use sticky menus on your eCommerce site. We’ve also curated a list of inspiring sticky menu examples that we’re excited to share with you. We’ll also take a good look at why fixed navigation can be advantageous and why not.Â
Dive in, shall we then?
5 things to AVOID when using sticky menus on your eCommerce site‍ ‍ 1. Allowing sticky headers to take up too much space The solution: By virtue of how they characteristically are, sticky headers tend to take up space. So, when you’re incorporating this element in design, it’s essential that you:
Revisit your content to chrome ratio. If you’re able to maximize this ratio, leaving more space for content, then visitors will be able to enjoy more navigational ease. A good content to chrome ratio ensures readable text and accommodates tappable targets better. Avoid making the logo larger than is necessary and make special size considerations for touchscreen devices. It’s a good practice to make the targets 1 cm x 1cm and readable text at 16 points. 2. Letting the menu get lost in the crowd The solution: In order for the sticky header to do its job, it has to remain distinct from the rest of the elements on the page. Distinct-ness is judged by how differentiated, noticeable and readable the sticky header is. Here are a few pointers to take into consideration:
Put the header in a color that clearly contrasts with that of the background. If there are expandable sub-menus and drawdowns, they need to also stand out from the background. Making the header opaque might not be the answer. While more of the background might be visible to the readers, in reality, they may be able to read very little of it. 3. Going overboard with the animation The solution: Find out why and where animation might be necessary, and if it isn’t, to keep it completely out of the picture. Animation can be distracting and disturbing when visitors are attempting to scroll down. Here are a few pointers to remember if you do decide to use animation:
If the logo is larger, animation would be necessary to make the logo smaller as the user keeps scrolling . This will, however, need to happen without a start or jump, which could potentially startle the visitor’s scroll flow. Use animation to keep the sticky header fixed at the top or side of the browser window. If there’s a delay in the header appearing every time, it can quickly become a distraction. 4. Ignoring semi-sticky header options The solution: Remember that it isn’t an all-or-nothing scenario. While designing your sticky header, consider using a semi-sticky option, with a few points to remember:
Account for how the animation needs to change when a user scrolls. Partially sticky headers always assume any movement is the user scrolling, though that’s not the case. The semi-sticky header needs to become animated neither too fast nor too slowly. Both can be distracting. Instead focus on simulating what feels like a movement that a user might be scrolling, bringing the animation to full view once the user stops scrolling.5. Preferring to use iFRames The solution: iFrames isn’t the best way out when you’re trying to incorporate a sticky header. iFrames can create confusions in the way scrolling takes place if there are multiple frames. The alternative is to use CSS instead, as this will help you play on speed and simplicity. You may want to pay more attention to aspects such as margins and position.Â
Why choose a sticky menu + pros and cons While there are many detractors of sticky menus, the latter has been found to be especially powerful for sites that need their visitors to act. In this context, eCommerce is a great example. For actionable websites, visitors need to maintain orientation to be able to act immediately and consistently. A sticky header helps with that. Sticky menus are also really effective for longer pages where navigation can potentially become circuitous and overwhelming. When such a page features a sticky header, visitors can find their way around more easily. This is also why this kind of navigation works well for first-time users who might not be as familiar with the layout of a site.Â
No matter your reasons for choosing a sticky menu, a glance at the pros and cons can further help you decide.Â
Pros Helps users continue with their site exploration without hindrance. Eases customer experience by making it easy to act with every click. Shows more content options to visitors without any extra effort. Cons A jerky or buggy sticky header can actually put visitors off. If not designed precisely, it can take up a lot of space. If you’re still not able to decide, it might help to remember that what a sticky header does is create context for your visitors. We like to think of it like a travel companion that helps in navigation, offers up links that deepen the overall experience and make it easy to go back or move forward.Â
8 sticky menu examples we love USP: Uncluttered design that features all essential elements
VIDEO
What we love: The fact that the brand does a completely different take on making the color of the top nav bar the same shade as the page in the background. But here’s the thing, they get the spacing and positioning of design elements so right, that this actually becomes an advantage in their case.Â
USP: Sticky left navigation
VIDEO
What we love: The sticky navigation on the left bar brings the most important “tappables” to the forefront. This can make a visitor’s site orientation and experience way smoother.Â
USP: Selectively fixed menu
VIDEO
What we love: Despite establishing a selectively fixed menu, the brand manages to hold on to their logo with a distinct minimalism. The three vertical bar icon when expanded also shows all the sections that appear in the fixed section in the top bar. Seamless yet contextual!
USP: Both top and bottom sticky menu
VIDEO
What we love: In spite of the chunky overall treatment of the website, the brand manages to bring subtlety to their sticky menu treatment. We especially love how seamlessly the top nav bar moves from including the logo and other elements in white space to becoming an efficient strip of purple. We also like that their sticky bottom menu is just a way for visitors to scroll up if they wish to.Â
USP: Clearly demarcated sticky menu
VIDEO
What we love: The way the sticky nav jumps into action right after the first scroll, and engages with a solid white background. What we also appreciate is how they’ve given the option to switch languages as part of the menu. And once the language switch happens, the menu seamlessly reflects it as well.Â
USP: Search embedded sticky menu
VIDEO
What we love: This brand’s sticky menu bar navigation is a delight to observe upon scrolling. Additionally, we love how so much thought has gone into reducing the chunky band of content at the top of the page, once a visitor starts scrolling. Only the most relevant tappables have been retained.Â
USP: A distraction-free sticky menu
VIDEO
What we love: The way the brand is able to enable the visitor’s exploration experience without making the sticky menu get lost in the crowd. We know it’s a fine balance and Topicals seems to have struck it.Â
USP: Autohide option that can be reversed with subtle cursor movements
VIDEO
What we love: The way social gets a major shoutout on their sticky menu. But since the icons can get distracting, their auto hide option comes in really handy too.Â
FAQs 1. What is sticky navigation? To put it simply, sticky navigation features a new spin on the fixed navigation feature. While in fixed navigation, the navigation bar at the top is visible until the user starts to scroll, with the sticky option, the bar “sticks” even as the user scrolls. This makes it possible for users to access all the links featured on the top navigation bar even as they continue to scroll - the need to keep scrolling up is reduced.Â
2. Sticky vs. fixed menus: which one should you choose? Traditionally, most websites featured fixed menus, which were essentially navigation bars that would not move with scrolling. With time, developers discovered sticky navigation headers that would not disappear with scrolling. If you’re struggling to decide which of them to use in your eCommerce site, consider the following:
What do you want your menu bar to do? If your site is action-driven, then a navigation bar with a few functional links might better fit into a sticky mode. However, if there’s a danger of cluttering, then accommodating them into a fixed navigation bar, might just be the way to go. How long is the page you are working on? If it’s a really long page navigating which your visitors might lose their orientation, a sticky menu might be a better idea. Longer homepages, for example, benefit from using a sticky menu simply because they can then enable visitors to go through most of their content. How focused are you on conversion rates? The reason this question is important is because speed has an instant impact on conversion rates. And come to think of it, sticky menus make navigation not just easier but quicker. Specifically for eCommerce, sticky menus can make important buttons like “add to cart” and “checkout” more accessible. Such menus can also be really helpful across product category and pages featuring search results. While there’s no one right answer, more and more eCommerce businesses seem to be going the sticky way. Having said that, not all sticky menus do what they are designed to do. If they appear clunky, jerky or hide other content that’s essential, visitors can instantly jump off your site.Â
3. How can you implement a sticky menu on your site? Once upon a time JavaScript had to be used to detect when the visitor would scroll past the top of the page.Â
position : absolute was then used after adding a class to make the switch. However, now CSS has come to be the language of choice to write sticky menus, considering it’s simpler and faster.Â
In CSS, position : sticky is meant to denote that an element will scroll along with the rest of the page until it is right at the top. Once there, it needs to stick while the other elements of the page can scroll in the background.Â
position : sticky seems to be compatible with almost all modern browsers, especially using th elements. It does not yet work with tr or thead elements. Also, the webkit prefix is best used because many webkit browsers currently require it to be used.Â
‍
Still doubtful?
Wondering if there are more ways to evaluate your sticky menu options a little further? Try out our free audit and get some enriching expert views.Â
.svg)
.svg)
.svg)
.svg)
.svg)
