How to Style WordPress Navigation Menus

A website navigation system is one of the most important features of every website, regardless of the platform it was built on. Navigation menus, in particular, are a key component of that system and one that has the biggest impact on visitors. So, making sure to style your WordPress navigation menus can be very beneficial for your site.

In short, navigation menus represent a structure of the website’s most valuable internal links. They provide a quick and efficient way for visitors to explore your content. These links could lead to your pages, posts, categories, or some other custom links of your choosing. Luckily, adding all of these is easy to accomplish in WordPress thanks to its intuitive menu creation and overview section.

However, once you’ve created a WordPress navigation menu, you might need to invest additional effort to style it. With proper styling and typography, navigation menus can become real attention grabbers and provide your visitors with a smooth, polished user experience. This could keep them on your site longer and reduce your bounce rate. In this article, we’ll show you how to style WordPress navigation menus to make the most of this feature. If you’d like to skip to any specific part of the article, just click on one of the links below:

Before we start

In general, every WordPress theme has a different, theme-specific default stylization of navigation menus. While premium WordPress themes, such as all those from the QodeInteractive collection offer a way to fully customize the default menu stylization, the same can’t be said for most free themes.

If you aren’t happy with the options your theme offers for stylization then you need to find an alternative way to style the WordPress navigation menus. To help you do this, you can use a suitable WordPress menu plugin or create custom CSS code. In this article, we will talk about the latter. The examples we will cover require at least a basic understanding of HTML and CSS, but we will explain everything thoroughly so users of all knowledge levels can follow along.

The examples we created for this article were made using the Lekker theme and are suited to its design. Therefore, you shouldn’t simply copy-paste them as they contain theme-specific CSS selectors and CSS rules that complement the existing theme design.

Instead, you should read through the article carefully and adjust the CSS code we provided accordingly. This includes replacing the CSS selectors with equivalent ones from your theme. Also, you should consider adjusting the existing CSS rules and/or adding new ones. After creating your CSS code, you should insert it in Appearance > Customize > Additional CSS. With that being said, let us begin.

Investigating the WordPress navigation menus

A requirement for creating any CSS code is being able to observe, i.e. inspect, the HTML structure of a given page. By doing this, you will be able to choose the appropriate CSS selector for the HTML element to which you’ll be applying a specific CSS rule.

To inspect your WordPress navigation menu, right-click on one of your navigation menu items and select the Inspect option from the menu that appears.

This will open your browser’s developer tools and place you within its Elements tab, right on the HTML element you right-clicked on. The same element will be highlighted on the page so you can see its dimensions and placement. Furthermore, depending on the element and if those properties were added with CSS, you might see its border, padding, and margin values.

You should browse through the HTML structure of your page by inspecting various elements. This will help you understand how certain parts of the navigation menu, or the header as a whole, are created using HTML and help you find the most appropriate CSS selector. Then, you could apply some CSS rules to that CSS selector in the manner shown below (pseudo-code).

appropriate CSS selector {
// Insert CSS rules here
}

Using classes or IDs is always a good starting point in creating the most appropriate CSS selector.

For example, if we wanted to target the navigation menu only, we could use the qodef-header-navigation class from the <nav> element. More specifically, we could use .qodef-header-navigation as the CSS selector.

Likewise, if we wanted to target the whole header area, we could use the qodef-page-header ID from the <header> element. More specifically, we could use #qodef-page-header as the CSS selector.

Similarly, if we wanted to target a navigation menu item, we could choose between using the <li> element and its classes, or delving deeper and using the <a> or <span> element within.

If you’re confused, don’t worry. The difference between all these elements and areas will be clearer when we dive into the style examples we prepared for this article.

Styling the WordPress navigation menu

In this section, we will share five examples you can use to style your WordPress navigation menu. As we mentioned before, none of them should be used as-is. Instead, you need to edit whichever one(s) you choose to make the CSS selectors and rules suit your existing website. With that being said, let us proceed.

For the first example, we’ll show you how to apply some simple styling properties to all your navigation links. These and CSS codes similar to them are often the first steps in properly styling the WordPress navigation menu.

You can see the CSS we created for this below:

.qodef-header-navigation li a > span {
color: #9e5423;
font-size: 25px;
line-height: 1.8em;
}

This code simply specifies the color of a menu item, its font size, and line height. Below is a screenshot of the HTML structure of our page so that you can see how we created the appropriate CSS selector.

After inserting that code, we got the following result.

You should know that, due to how menus and submenus are coded, a CSS selector similar to the one above will affect all menu items, both in the first level menu and in all other sub-level menus. If you want to apply different stylizations for menu items based on their depth (level) within the navigation menu, then you will need to create separate CSS code for each with uniquely chosen CSS selectors.

A common feature present in various WordPress websites is to seamlessly blend the navigation menu with the rest of the page. This is often referred to as having a transparent navigation menu or a transparent header. It is achieved quite easily, with a CSS code similar to the one below.

#qodef-page-header {
background-color: transparent;
}
#qodef-page-outer {
margin-top: -110px;
}

Let’s break it down.

Using the first line of code we made the background color of our header transparent. But, using only that one line of code isn’t enough. We also need to push the HTML content that is below the header upward. Otherwise, the header will take on the white color set for the background by default, because it’s added under the <body> tag of the page. Its presence will make our first line of code useless.

Therefore, we have to push the content underneath the header by adding a negative margin to it. For this, we picked the HTML element with the ID qodef-page-outer. We did this because the other element shown on the screenshot below (seen in the HTML structure of the page) is the mobile header. Its ID is qodef-page-mobile-header and, because it’s the mobile header, it will be hidden on all larger screens.

As for the negative margin value, you should set the same amount that you have for the header height to make them overlap perfectly. In our case, the header height was 110px, so we needed to set the corresponding margin to -110px. As such, when using this CSS, you need to replace both the CSS selectors and the negative margin amount, so that it matches the header height on your end.

With that being said, after inserting the CSS code shown above, we got the following result.

Another way to style WordPress navigation menus is to make them sticky, i.e. fixed to the top of your page. This can be achieved with just a couple of lines of CSS. And it’s a very useful feature since it will spare your visitors from any trouble with accessing the navigation menu, wherever they may be on the page.

To add this feature to your navigation menu, you would need to use CSS similar to this one:

#qodef-page-header {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
}
#qodef-page-outer {
margin-top: 110px;
}

Let’s break it down.

The first three CSS rules fix the header to the top of your page, starting from the top left corner. The z-index makes it so it is above any element it overlaps, and the width (set to 100%) endures the menu will span across its whole container element, i.e. the whole page.

However, there is an unfortunate side effect to using the position: fixed; rule. Any HTML element that has this rule is taken out of the regular HTML page flow. Therefore, any HTML element that is right below it will take its place. Since that is the main page content, it means that the content will be pushed up, and, subsequently, be covered by the header. Even though we want to make the header area overlap the main content as visitors scroll down, this means that there will be a section at the very top of the page that is always hidden.

To prevent this from happening, we need to push the content down by giving it a positive margin. Making this example a polar opposite of the one that preceded it. We accomplished this by adding a margin-top of 110px, which is the height of our header.

Therefore, when using the code, you will need to replace that margin value with one that matches your header’s height.

After inserting the CSS mentioned above, we got the following result. As you can see on the screenshot below, the code will “glue” the navigation menu to the top. This behavior will apply when scrolling both up and down the page.

You might have a very important link in the navigation menu that you want to distinguish from the rest of the links. It might be a contact, login, or some CTA button, or anything you like, and you can style it separately from the links around it. That way, you’ll help it stand out and grab attention. The best way of doing this is by adding a custom class to the specific link and then writing a suitable CSS code that targets that class in particular.

To do this, navigate to Appearance > Menus and locate the Screen Options in the top right corner of your screen. Click on them to open, find the CSS Classes option, and tick the checkbox next to it.

Then, select your menu, locate the menu item that you want to add a custom class to, and click to open it. Within the item settings, find the CSS Classes option and add your custom CSS class. In our case, we added the custom-nav-button class. When you’re done, press the Save Menu button to save this change.

Then, you need to create the appropriate CSS code for this custom class. Since CSS classes are written with a period (.) when used as a CSS selector, you’ll need to add a period before the name of your custom class when using it as a suitable CSS selector. Since we added a CSS class called custom-nav-button, the CSS selector we used in the code was .custom-nav-button.

To style only one link in the menu, we created the following CSS code:

.custom-nav-button span {
background: #ff0000;
color: #000000;
border-radius: 40px;
padding: 5px 17px;
-webkit-transition: color 0.3s ease-out, background 0.3s ease-out;
transition: color 0.3s ease-out, background 0.3s ease-out;
}
.custom-nav-button span:hover{
color: #ffffff;
background: #000000;
}

Let’s break it down.

First of all, the custom class is added to the appropriate <li> element. Depending on what you need to achieve, you might target that exact element or some of its inner elements. After examining the HTML code, we decided to apply the styles to the <li> element’s inner <span> element.

The code itself is pretty straightforward. We set a background color, text color, padding, and border radius for the link to make it stand out and look like a button. Additionally, we specified the text and background color on hover. Finally, we added a transition, to make the changes in both text and background color more smooth. The transition lasts 0.3s and its timing function is ease-out, making the transition slower at the end.

The transition is just one of many examples of how you can add a specific hover effect to an element or link, making it more visually appealing. We will show you another hover effect in the next example.

We need to mention that we disabled the default Lekker theme underline hover effect for this article. We did this to show you the effect you can create with this and the following example. And to avoid any possible confusion caused by overlapping hover effects.

With that being said, after adding our CSS, we got the result shown in the gif below.

Adding a hover effect or an animation to your navigation links can work wonders in attracting more visitors. Most premium themes offer unique animations to boost their UX. This is also the case with QodeInteractive, which goes a step further to create themes that offer special hover effects and themes with special scroll animations.

However, there is a way to create hover effects on your own using CSS. For the last example in this article, we’ll explain how you create an underline hover effect similar to the one present in the Lekker theme. Please note, as the CSS code required to achieve this is relatively advanced, so you might need to do additional research before modifying it.

The code in question is shown below.

.qodef-header-navigation li a > span {
position: relative;
}
.qodef-header-navigation li a > span:after { 
content: "";
position: absolute; 
left: 0; 
bottom: 0px; 
width: 100%; 
height: 2px;
background: #ff0000;
-webkit-transform: scaleX(0);
transform: scaleX(0); 
-webkit-transform-origin: center; 
transform-origin: center; 
-webkit-transition: -webkit-transform 0.3s ease-in; 
transition: -webkit-transform 0.3s ease-in; 
transition: transform 0.3s ease-in; 
transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in;
}
.qodef-header-navigation li a > span:hover:after { 
-webkit-transform: scaleX(1); 
transform: scaleX(1); 
-webkit-transform-origin: center; 
transform-origin: center;
}

Let’s break it down.

First of all, the CSS code is performed on an ::after pseudo-element. We set the position of the <span> element to relative and the position of its ::after pseudo-element to absolute. By doing this, we ensured that the ::after pseudo-element is positioned in relation to the <span>, and not to some other ancestor or even the whole <body> tag of the HTML document.

Furthermore, by using the corresponding values for the left and bottom, we placed the ::after pseudo-element directly below the <span> tag. Using the width, height, and background properties we made the div take up the whole width of the span element, gave it a height of 2px, and set its color to red. In short, with these properties we added a red-colored div that is placed directly below the navigation menu <span> element, making it seem as if the menu element is underlined.

Finally, the hover effect is created using the transform and transition properties in conjunction. The ::after element, both in its normal and hover state, has a transform rule applied to it. In the normal state, it is the scaleX(0) rule, meaning the ::after element shrinks along the x-axis. While in the hover state, it is the scaleX(1) rule, meaning the ::after element expands to its normal width along the x-axis.

Since the transform-origin property is set to center in both cases, it means the ::after element shrinks towards its center point and expands away from its center point. This explains the transform-related rules. As for the transition-related ones, they simply serve to smooth out the transition between expanding and shrinking. The duration of the transition is 0.3s and, because its timing function is ease-in, the transition starts slowly and then ramps up.

The hover effect we chose to showcase makes the navigation links underlined when hovered over. That “line” expands when someone hovers over a menu item and contracts as they move away from it. Both movements originate from a central point below the link text. Now that we covered how the effect is made, you can observe the result, shown in the gif below.

Final Thoughts

In this article, we have covered five ways to style WordPress navigation menus using CSS code. These include adding simple styles and or doing something more advanced like creating hover effects. We also covered how to style all your navigation menu items at once and how to style a specific one. Additionally, we showed you how to enable a transparent menu and a sticky one. Whichever example you choose to follow, please remember to edit the code in the article to match the HTML structure of your website and its existing design.