Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Style WordPress Navigation Menus (Updated)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to style your WordPress website’s navigation menu?

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.

How to Style WordPress Navigation Menus

Why Style Your WordPress Navigation Menu?

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 navigation menu is difficult to read, 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:

Method 1: Customize Your Navigation Menu With Full-Site Editor (Block Themes)

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.

Selecting the Full-Site Editor from the WordPress admin panel

Here, you’ll see options to customize different parts of your block theme.

Go ahead and click on ‘Navigation.’

Selecting Navigation in WordPress Full Site Editing

On the next page, click the pencil ‘Edit’ icon.

This will open the block editor.

Clicking the pencil edit button for Navigation in WordPress Full Site Editing

Once you’re in the block editor, click on the ‘Page List’ block that displays your WordPress website‘s pages as menu options.

Then, click ‘Edit.’

Editing the page list block

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.

Confirming to edit the page list block

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.

Adding menu elements to the navigation menu in FSE

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 certain menu items from the rest.

The block toolbar settings for a page link in menu

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.

The block styles tab for block elements in navigation menu

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.

Enabling more styling features in the block styles tab

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.

Adding a drop shadow to the call-to-action button

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.

Navigating to the header template in FSE

Now, open the List View and select Group.

This group consists of your header’s site title and navigation menu.

Selecting Group in List View in FSE

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.

Changing the background color of the header in FSE

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:

Example of a navigation menu styled with FSE

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.

Opening the global styles tab in FSE

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.

Method 2: Customize Your Navigation Menu With Theme Customizer (Classic Themes)

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.

The WordPress theme customizer

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.

The Header Builder menu in Astra

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.

Selecting Menus in Theme Customizer

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.

Adding CSS classes to menu items

Next, scroll down the panel.

Then, open your primary menu.

Selecting the primary menu in Theme Customizer

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.

Adding a CSS class to a menu item

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.’

Opening the Additional CSS tab in Theme Customizer

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;
Adding a background color to a menu item with CSS

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.

Changing the link colors in navigation menu with CSS

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.

The CSS class for primary menu

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).

Adding hover effects to menu items with CSS

Create Transparent Navigation Menus in WordPress

This CSS code snippet can make your navigation menu transparent:

#site-navigation { 

Using this effect will blend it in with the background image to give your website a clean, modern feel.

Transparent Navigation Menus

For more inspiration, you can check out these helpful tutorials:

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.

Adding the SeedProd license key to your WordPress website

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.

Accessing SeedProd's Theme Template Kits

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.

Choosing a theme template kit in SeedProd

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 Navigation Menu

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.

Editing a SeedProd theme header

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.

Editing the Nav Menu block

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.

Editing the Simple Nav Menu in SeedProd

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:

Configuring a new menu item in SeedProd Simple Menu

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.

Deleting or reordering menu items in SeedProd

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.

Choosing the WordPress Menu option in SeedProd

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.

Switching to the Advanced tab in SeedProd

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.

Configuring the menu's padding and margins for mobile in SeedProd

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.

Adding animation effects in SeedProd

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.

Adding a button in SeedProd

Then, drag the block anywhere to your header.

Once done, simply customize the button’s call to action, link, styling, and other settings.

Changing the button template in SeedProd

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.

Clicking Section Settings in SeedProd

Now, switch to the ‘Advanced’ tab.

Then, scroll down to the ‘Position’ menu.

Selecting the Position tab in the Advanced menu in SeedProd

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.

Creating a sticky header in SeedProd

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.

Enabling the SeedProd theme in WordPress

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:

Example of navigation menu made with SeedProd

Method 4: Customize Your Navigation Menu With Visual CSS Editor (More Customizable)

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.

Note: Check out our CSS Hero review to learn more about its features. WPBeginner users can also save up to 34% on CSS Hero with our exclusive coupon code.

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.

Opening CSS Hero in WordPress

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.

Clicking on the navigation menu in CSS Hero

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 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.

Changing the menu's background color in CSS Hero

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.

Opening the Extra tab in CSS Hero

Then, click ‘Make Shadow.’

Here, you will be able to edit the shadow settings.

Clicking Make Shadow in CSS Hero

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.

Creating a shadow effect in CSS Hero

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.

Saving changes in CSS Hero

You can read these guides to learn more about what you can do with CSS Hero:

Method 5: Customize Your Navigation Menu With Code (Advanced)

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.

Inserting a custom navigation menu using the WPCode WordPress plugin

Once you’ve created the menu, you can explore these tutorials.

Each one includes a method to customize the menu using WPCode.

Ultimate Guides to Customize WordPress Navigation Menu

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 expert pick of the best WordPress contact form plugins 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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

74 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Sydney Peason says

    The “Menu” option has disappeared under my “Appearance” menu option > is there another way to see the container CSS of my menu and options?


  3. Kristyna says

    Hello, I need advice, please:

    I have successfully added CSS to make one of my menu items different in color. However, when I scroll down, my fixed navigation primary menu comes down with me, and the changed color of that one item changes back to its original – How do I keep the new color of that one item even when scrolling down?


  4. Venkat Vavilala says


    I want to increase menu font size. How can I do this?
    If it is default, then how can I customize?

    Please show me easy method to increase the menu font size

    • WPBeginner Support says

      It would depend on which method from this article you plan on using. As an example, if you use the CSS method then you would use inspect element the same as under method 2’s examples and modify the font-size


  5. Trish says

    I am wanting to create a menu on the shop page of my woo commerce site, horizontally, that has all the categories of product that is sold. How can I do that, please? Thank you all for your help in advance.

  6. Kushal Sonwane says

    Though it was a great task to do, but after reading this article, it is very simple to customise navigation menus.

  7. Lisa says

    I am very new to doing this and I am creating a site in WP using the theme Oceanwp. I have done as you have suggested by clicking on CCS from the menu. I am trying to remove the arrow on my drop down menu and nothing I try works at removing it.

    Thanking you in advance for any help.

  8. Anirudhya says

    sir which theme you are using. iam starting a wordpress blog,i want a simple layout blog for my educational purpose.

  9. Bobby says

    Hi, how about with HTML code?
    I want to add a header to the neseted menus. But I don’t kow where or how to put it.

    • Daniela says


      I Would like to change the appearance of only the menu I have added for my salespage. I would like to change the height and add a logo.

      I am not a pro and I have tried some things to see if anything changes in the menu, but it doesn’t. This is what I have tried:

      #Salespage-menu {

      Can you please help me on my way?

      Thank you so much for your effort!

  10. Eugene says

    Hi Guys,

    I have an issue with my nav menu that I really would be glad of some help with pleas… The primary menu itself is perfect looking, the problem is with the submenu which drops down with a large gap approx 100px or so in size between it and the parent above.

    When I try to navigate onto the submenu it simply disappears from view.

    I have tried everything I can think of so far to move it directly up under the parent menu so that it will remain open and clickable but I have failed so far.

    This is the Custom CSS being used for the Point Theme:

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

    .post-info {
    display: none;

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

    .post-date {
    display: none;

    Thanks and Regards.

  11. Amirul Farhan says


    Is the plugin works even though with the theme purchased have its own menu design?

  12. Rida says

    if you want to use bootstrap you simply add the css classes of your own with simple one line code on your header.php

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

  13. Dhany says

    Yeay..another PLUGIN you guys share how to use PLUGIN sooo much, not exactly use wordpress…great job

    • WPBeginner Support says

      Hi Dhany,

      Thanks for the feedback. At WPBeginner, our target audience is mostly beginner level users. Most of them are not familiar with CSS, HTML, PHP, etc. Plugins make it easier for them to get things done without breaking their websites.


  14. Malin says

    Hi! I desperately need help with my menu on the site using Baskerville theme. With the latest update the menu has gone completely bananas! Please HELP!


  15. Raymond says

    This helped me a lot when I was trying to figure out how to get my styles from a bootstrap theme to work in WordPress. Thank you

  16. Samseen says

    Nice Post here,

    However, how can one target a particular item in the list. I actually did a work-around at this time, but I will want to target that particular menu item.

    Say for example, I want to have a different background color for the menu of that particular item. How can this be done?

  17. benjamin says

    Hello guys am new in coding, please I need real help here I have a WordPress site and my site theme is Baskerville , this theme support only one menu am trying to create navigational menus to my curious pages, please if there is code for doing that please where can I place it ,please I’ll so much appreciate a reply thank you.

  18. Arsh Dznr says

    i m ussing my css menu in wordpress but menus dropdown not showing pls help me


  19. Andika Amri says

    Hello wpbeginner, nice tuts!

    I am using vantage theme, already put custom class in one of my menu = “.menu-about”, but when i’m styling it stylesheet.css, its not applicable at all, do you have any suggestion at all?


  20. shaon says

    I am using twenty Twelve theme. Already made changes to my menu with different colors. But i cant move the navigation menu position on the header, it got too much space at bottom from the baseline of the header . I want it touching the bottom of the header.

  21. Niveditha says


    I have created a main menu in header and a footer menu using the wordpress codex. Now my two menus sit vertically on my page. How to code them for horizontal menus?
    Please help out, this is real urgent!

  22. Judy says

    I would kill for an infographic for what all those classes actually modify. Like:


    and what the difference is between the dashes/underscores like in .current-menu-parent vs .current_menu_parent

    i will make one for you if you explain it to me!
    thank you…

  23. Yogesh Kumar says

    hey i want to ask a very important thing
    Like the bar shown on your website’s nav bar above for the link Blog shows 8 links as we move our cursor on that …now my site’s are also showing in the same style but i want them to be displayed in such a manner that when i will move my cursor over it will show the 8 links side by side means 4-4……Please sir i am in a great need of this …please reply to this asap…

    • Editorial Staff says

      Usually menus are organized in unordered lists ul. When you have sub navigation or dropdowns, then are its own unordered list inside a list element. So an example CSS class that you would be modifying would be like: li ul{width: 220px;} li li{float: left; width: 100px;}

      Now this would set each second level list item to have an exact width and float left.


  24. Jim says

    Great article, thanks.

    I never new about that CSS class feature, at least I know now.

    Its really going to benefit me.


  25. Nilamkumar Patel says

    This is very helpful. Prior to this, I had understanding that we can’t add custom classes in wordpress from admin and I always used to do it in functions.php, but this is awsome. These people are rockers. And many thanks to Sayed for this helpful post :)

  26. wiseroner says

    great tutorial!! but how do i do something as simple as change the font size? what do i enter in to change the font size? thank you! :)

  27. wpbeginner says

    @mriulian Look in the tutorial above… the classes for current pages are already defined…

    In the header code, you need to define the menu container ID and container class… follow the article as it says, and it will work.

  28. mriulian says

    Just trying to be more clear, this is my code:

    // in the function page

    if (function_exists(‘register_nav_menus’)) { register_nav_menus( array( ‘mainNav’ ) ); }

    // in the header page

    ‘main_nav_menu’)); ?>

    // in the css file

    .current{ background-color: #0188AA; color: #fff; text-decoration: none; }

    How do I apply this class to my navigation? ( very easy in a static html page but apparently pretty complicated in wordpress).

    Thanks in advance

  29. mriulian says

    This is what I did but it doesn t work. I registered my menu in the
    functions page and then I called it from the header page as my main
    navigation. Now, I have a . current class in my stylesheet to be applied
    to the current page but it is not obvious how to do that.
    Can you help with a suggestion?

  30. wpbeginner says

    The way WordPress navigation menus work, it will automatically know which page is the current one..

  31. iirimina says

    Thank you for mentioning about the css classes in the screen options panel. The problem that I have with my navigation is how to style the nav menu so that each menu item gets a specific background color when you arrive at a certain page. You mention creating a class such as .current_page_item{} in your style sheet. But how to apply this class in the header.php?

  32. Rick says

    Where can I get further more detailed info on how to add the icons to the menu names. Whats a real good css guide for doing alot of these things you outlined here?


  33. Francisco says

    Hello. I absolutely loved this post and found it very useful, particularly the option to set individual CSS classes, so many thanks for this information.
    What I was wondering is if it would be possible to dynamically assign CSS classes from the php wp_nav_menu function call to certain types of elements, for instance, to parent menu items only. That way, you wouldn’t have to manually add that class in the Menu Screen every time a new type element (in the example, a new parent item) is created.
    Any thoughts on that would be greatly appreciated, :-)

  34. Jayesh says

    nice article.

    I want to change out put of wp_nav_menu().
    I do not like HTML generated by wp_nav_menu().
    I have my own nice HTML for Menu I want.
    so I wanted to modify HTML structure generated by wp_nav_menu().

    is this possible ?

    Kindly advise asap.

  35. Kalid says

    hi, thank for the tutorial. it would be nice if you guide me to have the nav menu used in your theme. Id like to have a drop-down menu like yours. tnks!

    • Editorial Staff says

      The WordPress default navigation menu lets you have drop down menus. Just drag them a little to the right of the main item, and it is possible. If you use a framework like Genesis, it already has Fancy Drop down option available, so you can simply select that. Or you can utilize jQuery techniques like SuperFish to do this. We may add a tutorial in the future.


  36. Keith Davis says

    You guys know your WordPress.

    This is not an easy tutorial but well explained and certainly adds to my understanding.

    Appreciate you educating the rest of us.

  37. Eli says

    I’m not sure in what you should place the first php wp_nav_menu code. Would it be in the functions file or header or…?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.