Sometimes you will want to highlight a particular element of a menu on your website, either by showing it with a different background color, another text color, etc.
We will do this by applying some CSS to that menu element, and this time I will do it with the Astra theme active, since it is the most downloaded WordPress theme, but the technique is valid for any WordPress theme.
Let’s see it step by step, you’ll see how easy it is.
Show advanced menu properties
Before we start the first thing is to make sure that the advanced properties will be shown in the menus, because by default they are not all active in WordPress.
To do this we will go to the customizer (Appearance > Customize) and, in the menu section, click on the gear icon at the top right to display them.
Once we have the advanced properties that we can display, we will activate, at least, the CSS classes, which is what we are going to use.
Add a custom class to the menu we want to highlight
Once activated the advanced property of CSS classes in the menus we can edit our menu and, in displaying the element we want to highlight, we will see that there is a box called “CSS Classes“.
Once identified we will add a new class, which we will call highlighted-menu, and publish the changes.
Create custom CSS class styles
We have to create this class that we have defined, applying styles to our taste.
To do this, without leaving the customizer, we went to the section of “Additional CSS“.
There we can apply style to our highlighted menu. An example would be this:
/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}Code language: CSS (css)That would be immediately applied in the preview like we saw above.
Another example would be like this:
/* Highlighted menu */
.highlighted-menu {
color: #ffffff;
background: transparent;
border-color: #1172c4;
border-style: solid;
border-width: 2px;
border-radius: 50px;
padding: 0px 10px;
transition: all 0.2s linear;
line-height:45px;
}
.destacar-menu a {
color:#1172c4
}
.destacar-menu:hover {
color: #ffffff;
background: #1172c4;
border-color: #1172c4;
}
li.destacar-menu:hover a {
color:#ffffff;
}º
.destacar-menu:active {
border-radius: 22px;
}Code language: CSS (css)Here we have applied a number of different styles. By moving the cursor over the menu, when it is active, inactive, and instead of a background color we have added a stroke.
It would look like this:
From this moment on, the limit is your imagination and your knowledge of CSS, to customize how you want to highlight the menu item(s) to which you have applied the custom CSS class, or others that you create.
Of course, this technique, although here we have seen it applied in the Astra theme, you can use it with any WordPress theme, the procedure is exactly the same.
Read this post in Spanish: Cómo destacar un elemento del menú con CSS
