When it comes to creating great user experiences, your navigation menu plays a crucial role. It helps visitors see and access different areas of your website.
As such, it’s important for your navigation menu to look and behave in the way that you want it to. If you have a WordPress.com site on the Premium or plugin-enabled plan, you have the ability to add custom CSS. Here’s how you can create a custom menu using CSS so visitors can navigate your site with ease.
If editing your website’s CSS feels a bit too technical for your preferences, there are other ways to make basic customizations to site navigation.
Watch the video below to find out how to customize menus on a WordPress.com website without editing code:
Create a custom CSS WordPress menu background
To change your menu’s background color, click My Sites > Personalize > Customize. Once the Customizer screen loads, click CSS.
Right-click on your navigation menu and choose Inspect. An Inspector panel will appear at the bottom of your screen, where you can view your website’s underlying code. The left-hand side will reflect the HTML whereas the right-hand side will display the CSS code that you need to modify.
Look for your theme’s CSS ID or the class that your theme uses for the container that surrounds your navigation menu. This is the code you need to use to modify the background color. In one example, the code looks like this:
.main-navigation {
background-color: #012e43;
}
In the screenshot below, notice that the background color of the menu is now dark blue.
Change font colors
Changing your menu’s background color can make your menu items harder to read. You’ll want to adjust the font color of your menu items and links to ensure that visitors can still see them. You can do so with the following code:
.main-navigation li.menu-item a {
color: #fff;
}
Style a single menu item
If you have a page that you want to drive visitors to (such as a “Hire Me” page), you can style it differently to make it stand out.
First, add a CSS class to the menu item that you want to style. Navigate to the Customize section, click Menus, and then click on the cogwheel icon and check the box next to CSS Classes.
Publish the changes and then select the menu that you’re styling. Click the menu item you want to style and, in the CSS Class, enter a short name like “.custom” or “.cta.” Publish the changes and then go back to the CSS section within the Customizer.
From your website’s page, right-click on the menu item that you want to change and use the Inspect tool to locate the code. You can then use the following code to modify its appearance:
.custom {
border: 2px solid #b4dff8;
border-radius:3px;
}
Add hover effects to menu items
You can also add hover effects to your custom CSS WordPress menu items. To do so, use the following code:
.custom:hover{
background-color:#b4dff8;
}
In this example, the appearance of the custom link when it’s hovered over is being altered, but you can also use it for any other menu item by replacing the “.custom” class with the following:
li.menu-item a:hover.
Make your navigation menu pop with custom CSS
Proper website navigation will ensure that your visitors have an easier time locating your content and services, which makes them more likely to stay on your site for longer periods of time. Use the tips above to distinguish your menus and provide the best possible user experiences.
ABOUT THE AUTHOR
Go WordPress 