WordPress Navigation Menus: How to Style Them


While the appearance of your navigation menus is handled by your WordPress theme, you can easily customize it using CSS to meet your needs. We’ll show you how to style the WordPress navigation menus on your site in this article. Do you want to change the colors or appearance of your WordPress navigation menus?

The first method is suitable for beginners because it makes use of a plugin and does not necessitate any prior knowledge of programming. We’ll demonstrate two different approaches. The second method is for advanced DIYers who would rather use CSS code than a plugin.

Method 1: Using a Plugin to Style WordPress Navigation Menus

Many beginners lack confidence in their ability to edit theme files or write CSS code on their own. CSS is used to style the navigation menus in your WordPress theme.

It eliminates the need to edit theme files or write any code. When this happens, a WordPress styling plugin can help.

The CSS Hero plugin must first be installed and activated. See our step-by-step guide to installing a WordPress plugin for more information.

To learn more, read our CSS Hero review. CSS Hero is a premium WordPress plugin that allows you to create your own WordPress theme without having to write a single line of code (no HTML or CSS knowledge required).

WPBeginner users can save 34% on their CSS Hero purchase by using this coupon code.

You’ll be redirected to get your CSS Hero License key after activation. Simply follow the on-screen instructions to return to your website in just a few clicks.

Then, in your WordPress admin toolbar, click on the CSS Hero button.

When you click the button, you’ll be taken to your website, where you’ll see a floating CSS Hero toolbar on the screen. A WYSIWYG (What You See Is What You Get) editor is available in CSS Hero.

To begin editing, click the blue icon at the top of the page.

Take your mouse to your navigation menu after clicking the blue icon, and CSS Hero will highlight it by displaying the borders around it. The items that you can edit will appear when you click on the highlighted navigation menu.

Let’s say we want to change the color of our navigation menu’s background. The top navigation menu container is shown in the screenshot above. In that case, we’ll choose top navigation, which will apply to the entire menu.

CSS Hero will now display various properties that you can change, such as text, background, border, margins, padding, and so on.

CSS Hero will provide you with a simple interface to make your changes. You can change any property by clicking on it.

We selected background in the screenshot above, and it displayed a nice interface with options for background color, gradient, image, and more.

You’ll be able to see your changes in real time in the theme preview as you make them.

Once you’re happy with the changes, save them by clicking the save button in the CSS Hero toolbar.

The best part about this method is that any changes you make are easily undoable. All of your changes are saved in CSS Hero’s history, and you can jump back and forth between them.

Method 2: Customize WordPress Navigation Menus by Hand

This method is intended for intermediate users and requires you to manually add custom CSS.

An unordered list (bulleted list) is used to display WordPress navigation menus.

If you use the default WordPress menu tag, it will usually display a list with no CSS classes attached.

The class name for your unordered list would be ‘menu,’ and each list item would have its own CSS class.

Most themes, on the other hand, have multiple places where navigation menus can be displayed. If you only have one menu location, this might work.

Using only the default CSS class could cause issues with menus in other places.

This is why you must also specify the CSS class and menu location. Your WordPress theme is probably already doing this by adding navigation menus with code like this:

This code informs WordPress that this is where the theme’s primary menu will be displayed. It also gives the navigation menu the CSS class primary-menu.

This CSS structure can now be used to style your navigation menu.

You’ll need to replace #header with the navigation menu’s container CSS class.

This structure will allow you to completely transform your navigation menu’s appearance.

These classes enable you to further customize your navigation menu. Other WordPress-generated CSS classes, on the other hand, are automatically added to each menu and menu item.

Individual menu items in WordPress can also have custom CSS classes added to them.

You can use this feature to style menu items by adding image icons to your menus or simply 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 go to edit each individual menu item after you’ve checked that box, you’ll notice that an additional field has been added.

Now you can 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

This gives you a lot of flexibility in terms of changing the styles and customizing the navigation menus to meet your specific needs. To create navigation menus, different WordPress themes may use different styling options, CSS classes, and even JavaScript.

Take a look at our guide on how to use the inspect tool to customize WordPress themes if you haven’t done so before. When it comes to determining which CSS classes to change, your web browser’s inspect tool will be your best friend.

To use the Inspect tool, simply point the cursor to the element you want to change, right-click, and select Inspect tool from the browser’s menu.

With that in mind, let’s look at some real-world examples of styling navigation menus in WordPress.

1. How to Change the Color of the Font in the WordPress Navigation Menus

Here is a sample custom CSS file that you can use to change the font color of navigation menus in your theme.

You’ll need to use the inspect tool to figure out your theme’s ID. The ID assigned to the unordered list that displays our navigation menu in this example is #top-menu.

2. How to Change the Color of the Navigation Menu Bar’s Background

To begin, you’ll need to determine the CSS ID or class that your theme uses for the container that surrounds the navigation menu.

After that, you can change the background color of the navigation menu bar with the custom CSS below.

This is how it appeared on our test site.

3. How to Change the Color of a Single Menu Item’s Background

Many websites use a different background color for the most important links in their navigation menu, as you may have noticed. A login, sign up, contact, or buy button could be included in this link. The link is more visible when it is given a different color.

To do so, we’ll add a custom CSS class to the menu item we want to emphasize with a different background color.

This will open a drop-down menu where you must check the box next to the option “CSS classes.” Click the Screen Options button in the top right corner of the screen under Appearance » Menus.

A new option to add your custom CSS class will appear. After that, scroll down to the menu item you want to change and expand it with a click.

You can now use this CSS class to style that menu item in a different way.

On our test site, it looked like this.

4. Adding Hover Effects to Navigation Menus in WordPress

This CSS trick gives your navigation menus a more interactive appearance. Do you want the colors of your menu items to change when you mouse over them?

Simply add the custom CSS below to your theme.

In this case, #top-menu is your theme’s CSS ID for the unordered navigation menu list.

This is how it appeared 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, add the CSS code below to your theme.

Simply replace #top-menu with your navigation menu’s CSS ID.

Here’s how it appeared in our demonstration:

See our guide on how to make a sticky floating navigation menu in WordPress for more information and an alternative method.

6. Use WordPress to make transparent navigation menus

Your navigation will blend in with the image if you use transparent menus. Users will be more likely to focus on your call to action as a result of this. With their call to action buttons, many websites use large or fullscreen background images.

To make your navigation menus transparent, simply add the following sample CSS to your theme.

On our demo site, it looked like this.

You may need to adjust the position of the header image to cover the area behind your transparent menus, depending on your theme.

You might also be interested in our tutorial on how to create a mobile-friendly responsive WordPress menu. We hope you learned how to style WordPress navigation menus from this article.

You can also find us on social media sites such as Twitter and Facebook. Please subscribe to our YouTube Channel for WordPress video tutorials if you enjoyed this article.

    15 Things You Must Do Before Changing WordPress Themes Checklist

    How to Fix the WordPress Error Establishing a Database Connection

    Why is it so important to build an email list today? (6 Reasons)

    Beginner’s Guide to Installing Google Analytics in WordPress

    Editorial Staff Information

    Over 1.3 million readers around the world rely on it. WPBeginner’s Editorial Staff is a group of WordPress experts led by Syed Balkhi.

    Hello, I’m looking for some help:

    When I scroll down, however, my fixed navigation primary menu follows me, and the changed color of that one item reverts to its original – how can I keep the new color of that one item even when scrolling down? I was able to successfully use CSS to change the color of one of my menu items.

    Thank you very much!

    When you scroll down, your theme may change the menu. You should be able to select the menu item while scrolling down to add your CSS if you use inspect element. https://kiuz.it/wp-tutorials/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/ Below is a link to a guide on how to use the inspect element:

    Hello there,

    How can I customize it if it’s default? I’m not sure how I’m going to do it. I’d like to increase the font size of the menu.

    Please show me a simple way to increase the font size of the menu.

    If you use the CSS method, for example, you would inspect the element as in method 2’s examples and change the font-size. It depends on which of the methods described in this article you intend to use.

    How did this site’s orange ribbon navigation menu come to be? Thank you. Good day, Admin.

    To learn how to use inspect element with your WordPress site, go to https://kiuz.it/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/.

    Did you have to edit the theme files to make the menu for this site? many thanks

    Our theme was one that we designed ourselves.

    I’d like to create a horizontal menu on the shop page of my woo commerce site that contains all of the product categories that are sold. Please tell me how I can accomplish this. Thank you all in advance for your assistance.

    If your theme already has a menu in that spot, you can create a regular menu by following this link: https://kiuz.it/beginners-guide/how-to-add-navigation-menu-in-wordpress-beginners-guide/

    Then, using our article here: https://kiuz.it/plugins/how-to-add-conditional-logic-to-menus-in-wordpress/, you can use conditional logic to have it only appear on your shop page.

    Though it was a difficult task, customizing navigation menus is very simple after reading this article. Thank you.

    Thank you very much.

    I’m brand new to this, and I’m building a site in WordPress using the Oceanwp theme. I’ve followed your advice and selected CCS from the menu. I’m trying to get rid of the arrow on my drop-down menu, but nothing I’ve tried so far has worked.

    Thank you in advance for any assistance.

    Hello, Lisa.

    You might want to contact the theme authors; they might be able to assist you.

    Which theme are you using, sir? I’m starting a wordpress blog for educational purposes, and I’d like a simple layout.

    Hello, Anirudhya.

    We’re running WPBeginner on a custom theme created just for us.

    I’d like to make the nested menus have a header. However, I have no idea where or how to put it. Hello, what about using HTML code?

    Hello there,

    I’d like to increase the height and include a logo. I’d like to change the look of only the menu that I’ve added to my salespage.

    This is what I’ve tried so far: I’m not a pro, and I’ve tried a few things to see if the menu changes, but it doesn’t.

    #Salespage-menu #Salespage-menu #Salespage-menu background:#2194af; height:40px; color:#2194af; color:#2194af; color:#2194af; color:#2194

    Could you please assist me on my journey?

    Thank you so much for all of your hard work!

    Good day, guys!

    The problem is with the submenu, which drops down with a large gap of about 100px or so between it and the parent above. I’m having a problem with my navigation menu and would appreciate some assistance…

    When I try to access the submenu, it just vanishes from view.

    I’ve tried everything I can think of to move it directly up under the parent menu so that it stays open and clickable, but so far I’ve been unsuccessful.

    The following is the custom CSS for the Point Theme:

    margin: 0;. #logo margin: 0;. padding: 0; site-branding; site-branding; site-branding; site-branding; site-branding; site-brand

    display: none;.post-info;.post-info;.post-info;.post-info;.post-info;.post-info

    #navigation ul li a padding: 5px 10px 5px 10px; min-height: 22px; padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px; padding: 5px 10

    display: none;.post-date.post-date.post-date.post-date.post-date.post-

    Regards and thanks.

    Hello, Eugene.

    It depends on the CSS and layout of your theme, as well as the classes that have been used. You can use the following custom CSS: We’re not sure what’s causing this problem.

    Sorry, but that didn’t work either…

    Thank you for your efforts; however, it appears that a new theme is required.

    Greetings.

    Hello there.

    Thank you. Is the plugin functional even if the purchased theme has its own menu design?

    If you want to use bootstrap, simply add your own CSS classes to your header.php file with a single line of code.

    ‘nav navbar-nav pull-right’, ‘menu_class’ => ‘nav navbar-nav pull-right,’ ‘menu_id’ => ‘primary-menu’ ); ‘container’ => ‘div’, ‘container_class’ => ‘primary’, ‘container’ => ‘div’, ‘container_class’ => ‘div’, ‘container_class’

    Yeay…another PLUGIN you guys share so much about how to use PLUGIN, not just wordpress… excellent work

    Hello, Dhany.

    The majority of them are unfamiliar with CSS, HTML, PHP, and other programming languages. Thank you for your comments. Our target audience at WPBeginner is primarily comprised of beginners. Plugins make it easier for them to complete tasks without causing their websites to crash.

    Dude… In the URL, it says ‘beginner.’

    Plus, halfway through, they laid out a manual option.

    Hello there! PLEASE ASSIST! The menu has gone completely insane since the most recent update! I’m in desperate need of assistance with my website’s menu, which is based on the Baskerville theme.

    Malin is a character in the film Malin

    When I was trying to figure out how to get my styles from a bootstrap theme to work in WordPress, this came in handy. Thank you very much.

    This is a very nice post.

    How, on the other hand, can one target a specific item in the list? I used a workaround at the time, but I’d like to focus on that specific menu item in the future.

    How can this be accomplished? Let’s say I want the menu of that particular item to have a different background color.

    In Chrome and Firefox, use the inspect element tool.

    Hello guys, I’m new to coding, and I’m in desperate need of assistance. I have a WordPress site with the Baskerville theme, and this theme only supports one menu. I’m trying to create navigational menus for my curious pages, and if there is code for that, please let me know where I can put it.

    I’m using my CSS menu in WordPress, but the dropdown menus aren’t showing up. Could you please assist me?

    thank you xxxxxxxx

    Did you properly add your scripts to function.php?

    Hello, wpbeginner, and thanks for the tutorials!

    I’m using the vantage theme, and I’ve already added a custom class to one of my menus = “.menu-about,” but when I try to style it with stylesheet.css, it doesn’t work. Do you have any suggestions?

    Thank you very much!

    I’ve already made some color changes to my menu. The theme I’m using is Twenty Twelve. I’d like it to be flush with the bottom of the header. However, I am unable to move the navigation menu position on the header because it takes up too much space at the bottom of the header from the baseline.

    Hello there,

    Please lend a hand; this is a life-or-death situation! Thank you very much. Using the wordpress codex, I created a main menu in the header and a footer menu. My two menus are now vertically aligned on my page. How should they be coded for horizontal menus?

    CSS is required for this. Examine the code in the default themes; the best examples are themes twenty thirteen and twenty twelve.

    as an example: I’d give anything for an infographic showing what all those classes actually do.

    .current-menu-parent.current_menu_parent.current_page_parent.current_page_parent.current_menu_parent.current_menu_parent.current_menu_parent.current_menu_parent.current_menu_parent.current_menu_parent.current_menu_parent.current_menu_parent.current_menu_

    What is the difference between dashes/underscores in.current-menu-parent and.current_menu_parent?

    If you explain it to me, I’ll make one for you! Thank you very much…

    Thank you for the information…

    As we move our cursor over the link Blog in your website’s nav bar above, we see eight links appear… My sites are currently displayed in the same style, but I’d like them to be displayed in such a way that when I move my cursor over them, they show the eight links side by side, or 4-4…… Hello, I’d like to ask you a very important question. Please respond as soon as possible… Please, sir, I am desperate for this…

    So here’s an example of a CSS class that you’d be changing: Menus are usually organized in unordered lists (ul). Sub navigation and dropdowns are their own unordered list within a list element.

    ul.menu li ulwidth: 220px; ul.menu li ulwidth: 220px; ul.menu li ulwid ul.menu li lifloat: left; width: 100px; ul.menu li lifloat: right; width: 100px; ul.menu li li

    Now each second-level list item will have an exact width and float to the left.

    Thank you for a fantastic article.

    I had no idea about the CSS class feature, but now I do.

    It will be extremely beneficial to me.

    Thank you.

    Prior to this, I was under the impression that we couldn’t add custom classes to WordPress from the admin interface, so I always did it in functions.php, but this is fantastic. This is extremely beneficial. Also, many thanks to Sayed for this informative post. These individuals are rockers.

    a fantastic tutorial!! However, how do I change the font size, for example? Thank you very much! What should I type in to increase the font size?

    You can’t just change the font-size in your css file’s main menu class. [email protected]

    Take a look at the video tutorial above… @mriulian mriulian mriulian The classes for the current pages have already been established…

    It will work if you follow the instructions in the article. You must define the menu container ID and container class in the header code…

    I’m just trying to be clear, so here’s my code:

    // on the page of functions

    register_nav_menus( array( ‘mainNav’ ) if (function_exists(‘register_nav_menus’)

    // in the page header

    ?> (‘main_nav_menu’));?> (‘main_nav_menu’));?> (‘

    // in the css stylesheet

    color: #fff; text-decoration: none; background-color: #0188AA; color: #fff;

    What is the best way to incorporate this class into my navigation? (This is very simple in a static html page, but it appears to be quite difficult in WordPress).

    Please accept my sincere gratitude.

    Now, in my stylesheet, I have a. current class that should be applied to the current page, but I’m not sure how to do it. I created a menu in the functions page and then used it as my main navigation from the header page. I’d like to make a suggestion, and I’d appreciate it if you could help. This is what I attempted, but it was unsuccessful.

    Because of the way WordPress navigation menus work, it will always know which page is currently active.

    In your style sheet, you mention adding a class like.current_page_item. The issue I’m having with my navigation is figuring out how to style the nav menu so that when you arrive at a specific page, each menu item has a different background color. However, how do I use this class in header.php? Thank you for bringing up the css classes in the screen preferences panel.

    Where can I find more detailed instructions on how to add icons to menu names? What’s a good CSS guide for doing a lot of what you’ve described here?

    Thank you.

    Because all you’re doing is putting a background image on top of the page. CSS-Tricks is a good forum, but if you want to learn CSS, you should probably look at CSS for Beginners books.

    Hello there. I thoroughly enjoyed and found this post to be extremely useful, particularly the option to set individual CSS classes; many thanks for providing this information. You wouldn’t have to manually add that class to the Menu Screen every time a new type element (in this case, a new parent item) is created this way. Any thoughts on this would be extremely helpful. What I’m curious about is whether it’s possible to dynamically assign CSS classes to specific types of elements using the php wp_nav_menu function call, such as parent menu items only.

    Yes, the Menu Class parameter would be used for that.

    That was my thought as well. Greetings! Thank you for confirming and responding so quickly.

    This is an excellent article.

    Wp_nav_menu() generates HTML that I dislike. I’ve created a nice HTML menu that I’d like to use. I’d like to alter the output of wp_nav_menu(). As a result, I needed to change the HTML structure generated by wp_nav_menu().

    Is this conceivable?

    Please respond as soon as possible.

    You can add your own divs and such, but the list output will always be used. It can be styled in any way you want.

    I can finally stop pulling out my hair! Thank you very much! I’ve bookmarked it and will tell others about it!

    Thank you very much! I’d like a drop-down menu similar to yours. It would be great if you could show me how to use the nav menu in your theme. Hello, and thank you for the tutorial.

    If you’re using Genesis, the Fancy Drop Down option is already available, so you can just select it. You can also do this with jQuery techniques like SuperFish. It’s possible if you drag them a little to the right of the main item. Drop-down menus are supported by the WordPress default navigation menu. In the future, we may add a tutorial.

    Thanks for a great article that helped me with my wordpress project.

    This is an excellent article. Thank you a lot! I had no idea that WordPress Menus had CSS classes.

    You guys are WordPress experts.

    This isn’t a simple tutorial, but it’s well-written and adds to my understanding.

    I appreciate you taking the time to educate the rest of us.

    I had no idea about the CSS menu option! What’s up, dude! That’s fantastic! a tad a tad a tad a

    Great job on the article; it’s very informative. I was also unaware of the menu options on the screen.

    Is it in the functions file, the header file, or something else? I’m not sure where the first php wp_nav_menu code should go.

    I had no idea there was a CSS Classes menu item! Thank you for bringing it to my attention.

    You’re most welcome.

    God bless you all, as well as the WordPress development team. That was precisely what I required. Neither do I!

    You have my admiration for pointing out the CSS styles! I used to style a list item with the css attribute, but these styles are much more useful. From Belgium, greetings. You’ve just gained another subscriber to your feed!

    We’re glad we could assist Pieter.

kiuz
Logo
Enable registration in settings - general