One of the most desirable features for any WordPress user for your theme is the ability to make the navigation menu or header of your theme sticky.
Interestingly, some of the most popular WordPress themes do not have that feature or only offer it in the paid version, but this has easy solution, or solutions.
Table of Contents
What is a sticky menu or header?
It is a property by which when a user navigates a page the header menu or the entire header follows him as he navigates. You will have seen it many times.
How to make them with CSS
The easiest, cleanest and fastest way to make your navigation menu or header fixed is to add a little CSS.
Just open the WordPress customizer ( Appearance > Customize ) and in the additional CSS section add code like the one below:
/* Sticky header */
#your-header-css-class {
background:#fff;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}Code language: CSS (css)You may have guessed that the only mandatory modification you must apply to the above CSS is to change #your-header-css-class to the CSS class of the header or navigation menu of your active theme.
The rest of the CSS works well with most themes but you can make adjustments to your liking, of course.
Hot to make it with a plugin
Of the many plugins that offer the possibility of making fixed navigation menus or headers, the only plugin that almost always manages to automatically identify the headers is My Sticky Menu.
Simply install and activate it and check if your website already has a sticky header menu.
If not, or if you want to make some adjustments to the design, opacity or whatever, go through the settings and you can customize it to your needs.
If, for some reason, it doesn’t automatically identify your theme’s header class, which I’m telling you is usually quite capable, you can always go through the Plugin’s FAQ, where it has a list of the most popular CSS classes.
How do i know which one is CSS?
To apply some of the previous tricks you have to know the CSS class of your theme’s header, and to do so you must right click on a page of your website and select the browser’s inspect option then hover over your header or look for it on the inspect code.
Then, in the browser inspector identify the class, it is easier than it seems.
Read this post in Spanish: Cómo hacer fijo el menú o cabecera, en cualquier tema
