Do you want to modify the colors or appearance of your WordPress navigation menus?
While the look of your navigation menus is handled by your WordPress theme, you may easily alter it using CSS to match your needs.
We’ll show you how to style the WordPress navigation menus on your site in this article.
We’ll demonstrate two distinct approaches. Because it employs a plugin and does not require any coding experience, the first option is suitable for novices. The second technique is for advanced DIYers who would rather utilize CSS code than a plugin.
Following that, we’ll show you a few instances of how you can change the look of your navigation menu.
Method 1: Using a Plugin to Style WordPress Navigation Menus
CSS is used to style the navigation menus in your WordPress theme. Many beginners lack confidence in their ability to alter theme files or write CSS code on their own.
When this happens, a WordPress styling plugin can help. It eliminates the need to update theme files or write any code.
The CSS Hero plugin must first be installed and activated. See our step-by-step guide on installing a WordPress plugin for more information.
CSS Hero is a premium WordPress plugin that allows you to create your own WordPress theme without writing a single line of code and with no knowledge of HTML or CSS.
You’ll be led to get your CSS Hero License key after activation. Simply follow the on-screen directions to return to your website in only a few clicks.
Then, in the WordPress admin toolbar, click the ‘Customize with CSS Hero’ button.
A WYSIWYG (what you see is what you get) editor is available in CSS Hero. When you click the button, you’ll be taken to your website, with the CSS Hero window visible on the left side.
Simply click on the element you want to alter to begin editing.
When you move your mouse over your navigation menu, CSS Hero will highlight it by displaying borders around it. The things that you can update will appear when you click on the highlighted navigation menu.
The primary navigation menu container can be seen in the screenshot above. You may change the background, typography, borders, spacings, lists, and more with CSS Hero.
You can alter any property by clicking on it. Let’s say we wish to modify the color of our navigation menu’s backdrop. CSS Hero will display you a simple interface where you can make your modifications after you click on the ‘Background’ property.
You can change the background color, gradient, image, and more in this section. You’ll be able to see your changes in real time in the theme preview as you make them.
When you’re through making changes, don’t forget to click the ‘Save & Publish’ button to save them.
The nice part about this strategy is that any changes you make are easily undoable. All of your modifications are saved in CSS Hero’s history, and you can jump back and forth between them.
Method 2: Styling WordPress Navigation Menus by Hand
This solution is intended for intermediate users and needs you to manually input custom CSS.
The navigation menus in WordPress are displayed in an unordered (bulleted) list. If you utilize the default WordPress menu tag, you’ll get a list with no CSS classes.
|
1
|
<?php wp_nav_menu(); ?> |
The class name menu will be used for the unordered list, with each list item getting its own CSS class.
If you only have one menu location, this might work. Most themes, on the other hand, provide many places where navigation menus can be shown. Using simply the default CSS class could cause issues with menus in other places.
This is why you must also specify a CSS class and a menu location. Your WordPress theme is probably already accomplishing this by adding navigation menus with code like this:
|
1
2
3
4
5
6
|
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'primary-menu', ) );?> |
This code informs WordPress that this is where the theme’s main menu will be displayed. It also gives the navigation menu the CSS class primary-menu.
This CSS structure can now be used to customize your navigation menu.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// container class#header .primary-menu{} // container class first unordered list#header .primary-menu ul {} //unordered list within an unordered list#header .primary-menu ul ul {} // each navigation item#header .primary-menu li {} // each navigation item anchor#header .primary-menu li a {} // unordered list if there is drop down items#header .primary-menu li ul {} // each drop down navigation item#header .primary-menu li li {} // each drap down navigation item anchor#header .primary-menu li li a {} |
You’ll need to replace #header with the navigation menu’s container CSS class.
This structure will allow you to fully transform your navigation menu’s appearance.
Other WordPress-generated CSS classes, on the other hand, are automatically added to each menu and menu item. You can use these classes to further customize your navigation menu.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// Class for Current Page.current_page_item{} // Class for Current Category.current-cat{} // Class for any other current Menu Item.current-menu-item{} // Class for a Category.menu-item-type-taxonomy{} // Class for Post types.menu-item-type-post_type{} // Class for any custom links.menu-item-type-custom{} // Class for the home Link.menu-item-home{} |
Individual menu items in WordPress can also have custom CSS classes added to them. You may use this feature to decorate menu items by adding picture icons to your menus or just changing the color of a menu item to highlight it.
In your WordPress admin, go to Appearance » Menus and click the Screen Options button.
When you try to modify each individual menu item once you’ve ticked that option, you’ll notice that an additional field has been added.
Now you may add your custom CSS to your stylesheet using this CSS class. Only the menu item with the CSS class you added will be affected.
Styling Navigation Menus in WordPress: Examples
To design navigation menus, different WordPress themes may employ different stylistic options, CSS classes, and even JavaScript. This allows you a lot of flexibility in terms of changing the designs and customizing the navigation menus to match your specific needs.
When it comes to determining which CSS classes to alter, your web browser’s inspect feature will be your best friend.
Simply place the cursor over the element you wish to change, right-click, and then choose ‘Inspect’ from the browser’s menu.
The CSS ID for the navigation menu in this theme is ‘primary-menu-list,’ and the CSS class is’menu-wrapper.’
With that in mind, let’s take a look at some real-world examples of how to style navigation menus in WordPress.
1. Change the color of the font in the WordPress navigation menus
Here is a sample custom CSS file that you can use to adjust the font color of navigation menus in your theme.
|
1
2
3
|
#primary-menu-list li.menu-item a {color:#ff0000;} |
The ID assigned to the unordered list that shows our navigation menu in this case is #primary-menu-list. You’ll need to utilize the inspect tool to figure out your theme’s ID.
2. Change the color of the navigation menu bar’s background
To begin, identify the CSS ID or class that your theme uses for the container that surrounds the navigation menu.
After that, you may alter the background color of the navigation menu bar with the custom CSS below.
|
1
2
3
|
.menu-wrapper {background-color:#bdd1cd; } |
On our sample website, this is how it looks.
3. Change the color of a single menu item’s background
Many websites utilize a different background color for the most essential links in their navigation menu, as you may have observed. A login, sign up, contact, or buy button could be included in this URL. The connection is more visible as a result of the distinct hue.
To do so, we’ll apply a custom CSS class to the menu item we wish to emphasize with a distinct background color.
Click the Screen Options button in the top right corner of the screen under Appearance » Menus. This will open a drop-down menu where you must select the ‘CSS Classes’ option and check the box next to it.
After that, scroll down to the menu item you wish to change and expand it with a click. A new option to add your custom CSS class will appear.
After you’ve saved the menu, you can use this CSS class to change the appearance of that particular menu item.
|
1
2
3
4
|
.contact-us { background-color: #ff0099;border-radius:5px;} |
On our test site, this is how it appears.
4. Add Hover Effects to Navigation Menus in WordPress
Do you want the colors of your menu items to change when they’re hovered over? This CSS hack gives your navigation menus a more interactive appearance.
Simply apply the custom CSS below to your theme.
|
1
2
3
4
5
|
#primary-menu-list li.menu-item a:hover {background-color:#a6e4a5;color:#666;bord |
The CSS ID used by your theme for the unordered navigation menu list in this case is #primary-menu-list.
This is how it appears on our test site.
5. Use WordPress to make sticky floating navigation menus
Normally, navigation menus appear at the top of the page and fade away as the user scrolls down. As a user scrolls down, sticky floating navigation menus stay on top.
To make your navigation menus sticky, apply the CSS code below to your theme.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#primary-menu-list { background:#2194af; 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: right; padding-left:10px} |
Simply change #primary-menu-list with your navigation menu’s CSS ID.
This is how it appears in our demonstration.
See our post on how to make a sticky floating navigation menu in WordPress for more information and an alternative way.
6. Use WordPress to make transparent navigation menus
With their call to action buttons, many websites use huge or fullscreen backdrop graphics. Your navigation will blend in with the image if you use translucent menus. Users will be more inclined to focus on your call to action as a result of this.
To make your navigation menus transparent, simply add the following sample CSS to your theme.
|
1
2
3
|
#site-navigation { background-color:transparent; } |
On our demo site, it appears like this.
You may need to alter the location of the header picture to cover the area below your translucent menus, depending on your theme.
7. Create a unique look for the first and last menu items.
Using the.first and.last classes, you can add unique styling to the first and last items in your WordPress navigation menu. Even if the items in your menu are rearranged, this will ensure that the relevant things are styled.
The following code snippet should be added to your theme’s functions.php file:
|
1
2
3
4
5
6
|
function wpb_first_and_last_menu_class($items) { $items[1]->classes[] = 'first'; $items[count($items)]->classes[] = 'last'; return $items;}add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class'); |
For your first and last navigation menu items, you’ll get.first and.last CSS classes, correspondingly. Those classes can be used to style the menu elements.
This CSS formatting, for example, can be added to your theme’s style.
The first and last menu items are bolded using a CSS code.
|
1
2
|
.first a {font-weight: bold;}.last a {font-weight: bold;} |
On our demo site, this is how it looks.
Refer to our post on how to add the first and last CSS classes to WordPress menu items for additional details and to discover how to achieve the same effect using CSS selectors.
We hope you learned how to style WordPress navigation menus from this tutorial.