A well-styled menu can make a big difference. It can improve the overall look of your site, make it easier for visitors to find what they’re looking for, and even encourage them to click on certain pages.
Here at WPBeginner, we’ve seen all sorts of creative ways to style menus, so we want to share what works best for different situations.
In this article, we will show you how to style your WordPress navigation menu in 5 different ways.
Your WordPress navigation menu is the roadmap of your website, guiding visitors to the most important pages. It appears at the top of most websites, making it a prime spot to grab attention and influence how users explore your content.
Styling your navigation menu goes beyond just making it look pretty. It can significantly improve your website’s user experience and, in turn, boost your search engine optimization (SEO).
If your menu design is difficult to use, visitors might struggle to find what they’re looking for and leave feeling frustrated. On the other hand, a clear and visually appealing menu can encourage them to click through to different sections and spend more time on your site.
As a result, you can increase your site’s pageviews and reduce its bounce rate.
This guide will break down different methods for styling your navigation menu, depending on your WordPress theme and comfort level. You can use the quick links below to navigate through this tutorial and find the method that works best for you:
If you’re using a block theme and want to style your site navigation menu using the Full-Site Editor, this is the method for you.
First, head over to your WordPress dashboard and navigate to Appearance » Editor.
Here, you’ll see options to customize different parts of your block theme.
Go ahead and click on ‘Navigation.’
On the next page, click the pencil ‘Edit’ icon.
This will open the block editor, where you can edit your Navigation block.
Once you’re in the block editor, click on the ‘Page List’ block that displays your WordPress website‘s pages as navigation menu items.
Then, click ‘Edit.’
A popup window will now appear, telling you that you can now edit the Page List block. You can edit, remove, reorder, and add new menu items to the block.
Click ‘Edit’ to continue.
The block editor for the navigation menu works like when you edit a page or post. Feel free to add other menu elements like custom links, a call-to-action button, a search form, a site logo, and so many more.
If you’d like a deeper dive into managing menus with the Full-Site Editor, check out the section on how to edit your navigation menu in our Full-Site Editing guide. That section also talks about creating submenus.
Now, let’s get to the styling. Click on any block to get started.
Depending on the block, the toolbar may offer some customization options. For example, if you select a Page Link, you can bold, italicize, strikethrough, and reorder it if needed.
You can use these tools to highlight a single menu item from the rest.
In the settings panel on the right, switch to the ‘Block’ tab, and under it, navigate to the ‘Styles’ tab.
Here, you can customize the color, typography, dimensions, borders, and shadows of your block.
Blocks tend to have default Styles settings. For instance, if you’re editing a Page Link, you might only see options like ‘Font Size’ and ‘Width.’
But don’t worry. Just click the three-dot menu next to these options to enable more customization possibilities, like changing the font family and letter spacing.
Similarly, if you have a Button block in your navigation menu, clicking on it will reveal options to customize its style, text, background color, typography, dimensions, border, and even shadow.
You can read our guide on how to add a call-to-action button for more information.
If you want to change the background color of your navigation menu, then you will have to do that by editing your theme’s header template.
To open it, just click the command search field at the top that says ‘Navigation.’ Then, type in ‘Header’ and hit your Enter key.
Now, open the List View and select Group.
This group consists of your header’s site title and navigation menu.
Then, open the ‘Styles’ tab in the Block settings sidebar and click ‘Background’ in the Color section.
After that, just choose a background color for your header template.
Once you’re happy with your navigation menu’s style, simply click the ‘Save’ button, and your new menu and header will be live on your WordPress blog or site.
Here’s what our navigation menu looks like on our demo site:
Keep in mind that the style choices you will have depend on your specific theme’s overall styling options.
If you want to customize your theme’s global styles, then you need to click the ‘Styles’ button at the top right corner.
From here, you can change the typography, colors, and layout for the whole website.
Note: Remember that the changes you make here will affect not only your navigation menu but also other parts of your theme.
For more information, check out the section on how to change your website’s global styles in the Full-Site Editing guide.
This method is for users with classic WordPress themes who want to style their navigation menu using the built-in Theme Customizer.
Like with the previous method, we’ll focus on styling the menu’s appearance rather than managing the menu items themselves.
If you’d like to learn how to create menus and manage them in classic themes, check out our guide on adding a navigation menu in WordPress. It covers creating menus with the Customizer, assigning them to different menu locations, and adding menus as widgets.
To use the Theme Customizer, head over to your WordPress dashboard and navigate to Appearance » Customize.
Here, you’ll see options to customize various aspects of your theme, which will depend on the theme you’re using. In most cases, WordPress themes have a ‘Menus’ option, but third-party developers may add other settings, too.
For example, the Astra theme has a dedicated Header Builder for menu customization. Be sure to consult your theme’s documentation to see if they add special menu settings.
If your theme doesn’t have such customization options, don’t worry. We can easily style the menu using custom CSS.
First, click on the ‘Menus’ section.
On the next page, click the gear ‘Settings’ and then select ‘CSS Classes.’
This allows you to assign a unique CSS class to each menu item, enabling you to style them individually later.
Next, scroll down the panel.
Then, open your primary menu.
What you want to do now is find the menu item you want to modify and click to expand it.
You’ll see a new option to add a custom CSS class. In the example below, we’re just adding the CSS class contact-us to our Contact Us page.
Once you’ve assigned CSS classes to your menu items, head back to the main menu in the Theme Customizer.
Then, click on ‘Additional CSS.’
Here, you can add custom CSS code to style your navigation menu.
Let’s explore some examples, and feel free to change the CSS classes and hex color code:
Change the Menu Item’s Background Color
The following code snippet changes the background color of the menu item with the CSS class contact-us to a green (#E3FFA8) and adds rounded corners (border-radius: 5px):
.contact-us {
background-color: #E3FFA8;
border-radius: 5px;
}
Change Default Menu Link Color
This code snippet changes the color of all menu links within the primary menu list (#primary-menu-li a) to red (#ff0000):
.primary-menu li a {
color: #ff0000;
}
Note that the CSS class for your theme’s primary menu may look different from ours.
To see what your theme’s CSS class primary menu is, you can use the inspect tool around your navigation menu area.
Then, look for an HTML code that says ‘menu’ or ‘navigation-menu.’ There should be a CSS class that defines it next to it.
Add Hover Effects to Menu Items
This code snippet targets all menu items within the primary menu list (#primary-menu li) and adds a hover effect:
.primary-menu li a:hover {
background-color: #a6e4a5;
color: #666;
border-radius: 5px;
}
When a user hovers over the menu item, the background color changes to a light green (#a6e4a5), the text color changes to a dark grey (#666), and rounded corners are added (border-radius: 5px).
Create Transparent Navigation Menus in WordPress
This CSS code snippet can make your navigation menu transparent:
#site-navigation {
background-color:transparent;
}
Using this effect will blend it in with the background image to give your website a clean, modern feel.
For more inspiration, you can check our guides below:
Remember, these are just a few examples to get you started. If you would like to use these same methods but can’t find the Additional CSS section, check out our guide on how to fix the missing theme customizer issue.
This method is perfect for those who want more control over their navigation menu’s appearance but still prefer a beginner-friendly experience. It’s also a great option if you’re still in the early stages of building your website and haven’t launched it yet.
A page builder plugin allows you to visually design your website’s layout using drag-and-drop functionality without needing to write any code. This makes it ideal for complete beginners.
In this section, we’ll be using SeedProd as our page builder plugin. SeedProd offers a user-friendly interface and includes extra blocks and features to make your navigation menu stand out.
Note: We’ll be using SeedProd Pro, as the theme builder feature is only available in the Pro version. However, feel free to use the free version to explore what SeedProd is like.
Step 1: Install and Activate SeedProd
First, install and activate the SeedProd plugin on your WordPress website. You can read our guide on how to install a WordPress plugin for more information.
Once activated, navigate to SeedProd » Settings from your WordPress dashboard. Then, enter your SeedProd license key and click the ‘Verify key’ button.
Step 2: Choose a SeedProd Theme Template Kit
Now, head over to SeedProd » Theme Builder. This is where you can create a custom WordPress theme from scratch.
Click the ’Theme Template Kits’ button to browse through a gallery of pre-designed templates.
For this tutorial, we’ll be using the Smile Craft Medical Website Theme. However, feel free to choose any template that suits your business.
You can preview these theme template kits by clicking the magnifying glass icon to see which one fits your website’s style.
Once you’ve found a theme template you like, click the orange checkmark icon to import the template parts.
SeedProd will now create the essential website sections like header, footer, homepage, and so on. These can all be edited visually using the drag-and-drop builder.
Step 3: Customize the Menu Design
Once the theme template has been installed, you will return to the Theme Builder page.
In a SeedProd theme template, the navigation menu is located in the header template part.
To edit your header template, simply hover your mouse over it and click the ‘Edit Design’ link. This will open the template in the drag-and-drop editor.
You will now see a header section that consists of the Nav Menu block (which is your navigation menu) and other blocks, depending on the theme.
To edit the menu, click on the Nav Menu block. The left sidebar will then show you a list of block settings.
By default, SeedProd uses the ‘Simple’ menu to create a menu based on the theme template you use. However, you can also go with the ‘WordPress Menu’ option to use a pre-existing menu you already created using the standard WordPress menu editor (Appearance » Menus).
Let’s break down the difference between the two. The Simple method lets you add, edit, and remove links directly within the page builder interface.
To create a new menu item, click the ‘+ Add New Item’ button.
Here, you can enter the text label and link URL.
Then, choose to open the link in a new window and add a nofollow attribute (if needed). Like this:
You can also rearrange the menu items by clicking the three-line button next to an item and dragging it up or down.
To delete a menu item, simply hover over it and click the trash icon next to it.
The downside of this option is you cannot create dropdown menus. That’s why it’s called ‘Simple.’
On the other hand, the ‘WordPress Menu’ option doesn’t allow you to manage menu items directly from the SeedProd editor. You have to do that in the menu editor.
The good news is that if your preexisting menu is a dropdown menu, you can display it using this method.
Whichever method you choose, you can customize the font size and spacing between menu items, add a text divider, or adjust the alignment.
The ‘Advanced’ tab offers even more customization options.
You can change the list layout from horizontal to vertical, adjust typography, modify text and hover colors, and even add text shadows.
If you scroll down, you can control padding and margins for desktop, tablet, and mobile devices.
This way, your menu is easy to navigate on any screen size.
Want to make your menu stand out?
SeedProd lets you add animations for a more engaging user experience. You can read our step-by-step guide on how to add CSS animations in WordPress for more information.
If you want to add a new call-to-action button in your navigation bar, you can use SeedProd’s Button block.
Just open the block finder in the left-hand sidebar and find the Button block in the left-hand sidebar.
Then, drag the block anywhere to your header.
Once done, simply customize the button’s call to action, link, styling, and other settings.
You can also create a sticky menu that stays at the top of the page as the user scrolls down. This way, they won’t have to go up every time they want to go to a different page.
To do this, simply hover over the section until a purple line appears, then click the gear ‘Settings’ icon.
Now, switch to the ‘Advanced’ tab.
Then, scroll down to the ‘Position’ menu.
Here, choose ‘Sticky.’
After that, add a zero to the top offset and a high z-index number (like 999). This is to make sure the header always appears right above the page.
Once you’re happy with your customized navigation menu, click the ‘Save’ button.
Step 4: Publish Your Custom WordPress Theme
At this stage, you’re ready to use your new custom WordPress theme. To activate it, go back to the ‘Theme Builder’ page and toggle on the ‘Enable SeedProd Theme’ button.
All you need to do now is view your website and check out your new custom navigation menu.
Here’s what our navigation menu looks like on our demo site:
This method offers more customization options than the built-in WordPress features, but it’s not quite as flexible as using a page builder plugin. That said, it’s a great solution if you want to make some design tweaks to your navigation menu without completely replacing your theme.
This method is also a good alternative for those using classic themes that lack styling options but aren’t comfortable with the CSS editing in Method 2.
Here, we’ll guide you through using a premium WordPress visual CSS editor plugin called CSS Hero. It allows you to visually design your website without writing any code. No HTML or CSS knowledge is required.
First, go ahead and install the CSS Hero plugin in WordPress. You can read our guide on how to install a WordPress plugin for more information.
Once you’ve activated the CSS Hero plugin, you’ll see a new button called ‘CSS Hero’ in your WordPress admin toolbar. Click this button to launch the visual editor.
CSS Hero uses a WYSIWYG interface. Clicking the button will open your website alongside the CSS Hero pane on the left side of your screen.
To edit your navigation menu, you can move your mouse over it. CSS Hero will then highlight it with a border. Click on the highlighted area to start customizing the menu.
CSS Hero lets you edit various aspects of your navigation menu container, including background, typography, borders, spacing, lists, and even extra effects.
For example, let’s say you want to modify the menu background color. Clicking on ‘Background’ will open a user-friendly interface where you can choose a new color, gradient, or image.
As you make changes, you’ll see them reflected live in the website preview on the right.
Or, you can add a box shadow to your menu items to make them more eye-catching.
To do this, navigate to the ‘Extra’ tab.
Then, click ‘Make Shadow.’
Here, you will be able to edit the shadow settings.
Now, you can just play around with what the shadow looks like.
Feel free to drag around the shadow’s orientation, blur and spread quality, and position.
You can change anything you want with CSS Hero’s interface, so you can experiment to find what works best for your site.
Pro Tip: If you followed the steps in Method 2 to add CSS classes to your individual menu items, then you can also use CSS Hero to target and customize those specific menu items for even more granular control over your navigation menu’s appearance.
Once you’re happy with your customized menu, click the ‘Save’ button to store your modifications.
You can read these guides to learn more about what you can do with CSS Hero:
This method is more suitable for users comfortable with code. It also allows you to build a custom menu if your theme doesn’t include one by default.
Adding custom code snippets might seem daunting at first, as it involves editing theme files like functions.php and header.php. However, there are ways to make it easier.
We recommend using a plugin called WPCode. It provides a safe and user-friendly way to add custom code to your WordPress site without modifying core files.
Our guide on how to add a custom navigation menu in WordPress themes can walk you through the steps to create a menu with WPCode.
Once you’ve created the menu, you can explore these tutorials.
Each one includes a method to customize the menu using WPCode.
Now that you’ve explored the basics of styling your WordPress navigation menu, here are some more guides you can read to take your menu to the next level:
We hope this article helped you learn how to style WordPress navigation menus. You may also want to check out our ultimate guide to WordPress design elements and our beginner’s guide to creating a custom page in WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
