At present, the user experience On a website, this is one of the most important elements, both for areas such as SEO and for increasing conversion rates. And, of course, one of the most important parts of a website is the menu, which we can lose sight of as we scroll. However, we can set up a sticky menu **so that it always remains in our field of vision.**.
Use a sticky, fixed, adhesive or tacky menu It is one of the most widespread practices today. At Euroinnova, we want to understand why this is the case, as well as provide you with a range of examples and best practices so that you can implement this feature on your website. However, as you will see, there are instances where it is not particularly advisable.
Are you ready? Let's get started!
What is a sticky menu?
A sticky menu, sticker menu o sticky header, consists of the top navigation bar that we see on any website, but with the difference that it remains visible at the top, even if the user scrolls down. The advantage of this type of menu is that it ensures continuous and quick access to the main options listed in the menu, regardless of the user’s position on the page.
From an SEO perspective, a sticky menu is very beneficial because it improves the user accessibility. Consequently, it is normal for many websites to improve metrics such as the residence time or the bounce rate.
And how do you implement a sticky menu? Naturally, to do this you will need a basic understanding of web design y CSS. The fact is that to create a sticky menu, we need to use the `position: sticky` property. Even so, as we shall see later, it is possible to use constructors such as Elementor o Divi to implement it in WordPress.
Examples of adhesive menus
The first thing we’re going to look at is that there are 3 types of sticky menus. Although the option to pin this menu to the top of the website is the most common, we have other options which might be of interest for your project or website.
- Fixed top sticky menu: As the name suggests, this involves pinning the menu to the top of the page.
- Fixed menu on the left-hand side: In this case, as with Kayak, for example, it is used to allow users to switch between and navigate according to their needs. For this reason, it is usually positioned on the left-hand side.
- Fixed sticky menu on the right-hand side: Mainly used on blogs such as InVision, it allows users to browse the various categories and find posts on topics that interest them.
Websites where sticky menus are common
On which websites does a sticky menu work best? As we’ve mentioned, this is a feature that enhances the user experience, but there may be cases where it isn’t necessary. This is particularly true of websites that aren’t very long, where the menu would reappear after just a single scroll.
So, these are the websites where we recommend including this sticky menu.
E-commerce
Imagine for a moment that you visit an online shop, browse through different products, add a few to your basket, but then have to go right back to the start to access your basket or switch categories. That’s why the sticker menu This is a good feature on this sort of website, as it allows for seamless browsing without the user feeling lost or being unable to find their basket. They’ll be able to see it at all times!
News or trends blogs
Another example of a website where a sticky menu works perfectly is at blogs and news. With this feature, users will be able to browse the different categories once they have finished reading a news article, without having to scroll back to the top.
Services pages
Pages detailing services tend to be very long, listing what is included, featuring testimonials and other elements. For this reason, keeping the menu as a sticky element It will help the user when they want to find out about another service.
HTML structure of a sticky menu
To create the HTML structure of a sticky menu We’ll need a few basic tags, as well as apply styles in CSS which allow the menu, for practical purposes, to remain in a fixed position whilst the user scrolls down the page.
The structure should therefore begin with a for the navigation bar. Here is a basic example of the HTML structure of a sticky menu:
For a menu to be sticky, it must also be used with the property position: sticky. This tells the code to keep the menu fixed at the top of the page when the user scrolls down the webpage. Here’s an example:
.sticky-header {
position: -webkit-sticky; /* For WebKit browsers */
position: sticky;
top: 0;
background-colour: #fff;
z-index: 1000;
}
Best practice for sticky menus
Below, we’d like to share a number of best practices to follow when implementing a sticky menu on your website. For example, it’s a very good idea for this navigation bar to have a simple, minimalist design, without too many distractions for the user. A sticky header that contains too many elements and takes up too much space can be very annoying, especially on mobile devices.
The sticky menu it must be clear, featuring key elements such as the main sections or important shortcuts. Furthermore, it is also worth creating a menu that changes colour or stands out when activated. This way, users will always bear this in mind whilst browsing.
Implement a sticky menu may affect the page loading speed, so it is also advisable to carry out speed tests. To resolve this sort of problem, it may be helpful to use web optimisation tools and check the performance of the Sticky menu items o Divi sticky menu, particularly in WordPress.
How do you create a sticky menu in WordPress?
Creating a sticky menu in WordPress It’s much simpler than doing it via the website’s code. These days, there are tools such as Elementor or Divi, which allow you to create a sticky menu without needing to know any code. That said, another way to build a sticky menu is via the plugins, such as “Sticky Menu (or Anything!)” and “myStickymenu”.
To help you understand this information, we’ll explain How to set up a menu in Elementor. All you need to do is open the page editor and select the header. In the “Advanced settings” tab, tick the ‘sticky’ option and configure settings such as visibility and the devices on which it will be enabled.
Another way to create a custom sticky menu in WordPress is using CSS code. All you need to do is apply position: sticky to the CSS class of the header and set top: 0 so that the menu stays at the top.
Español 
English (UK)