Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Customize WordPress Menu

How to Customize WordPress Menu Styles in 3 Easy Ways 

Written By: author image Stacey Corrin
author image Stacey Corrin
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.
     Reviewed By: John Turner
reviewer image John Turner
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

Do you want to learn how to customize WordPress menu styles?

WordPress menus help organize your website’s content and make it easy for visitors to find what they’re looking for. But the default WordPress menu can be a bit plain, making it difficult to stand out.

In this guide, we’ll show you how to customize WordPress menus for easier website navigation.

Why Customize Your WordPress Menu?

Your menu is one of the most essential parts of your WordPress website. It’s what visitors see first when they land on your site and what they’ll use to navigate around. That’s why ensuring your menu is well-designed and easy to use is important.

Here are a few reasons why you should customize your WordPress navigation menu:

  • Improve the look and feel of your website. Your menu is a big part of your site’s overall design. By customizing it, you can match the look and feel of your homepage and other top-level pages and make it more visually appealing.
  • Make your website more user-friendly. A well-designed menu can help visitors find what they’re looking for quickly and easily. By customizing your menu, you can make it easier for visitors to navigate your site and find the information they need.
  • Improve your website’s SEO. The structure of your menu can also affect your site’s SEO. By customizing your menu, you can make it easier for search engines to index your site and rank it higher in search results.

There are many ways to customize your WordPress menu. You can change the order of menu items, add new items, and even change the design of the menu itself.

There are also many plugins available to help customize things further. In the step-by-step guide below, we share 3 ways to add custom menus to your WordPress site with and without using a WordPress plugin.

How to Customize WordPress Menu with a Page Builder Plugin

First, we’ll show you how to customize your WordPress menu using a page builder plugin. We’ll use SeedProd in this example, but similar principles apply to any other page builder.

SeedProd Drag and Drop WordPress website builder

SeedProd is a powerful WordPress page builder that allows you to create custom pages and menus in WordPress without writing code. It’s easy to use and offers a wide range of features, including:

  • Drag-and-drop page builder
  • WordPress theme builder
  • Pre-made templates
  • Customizable menus
  • Social media integration
  • And more.

You can even use it to add custom menus to your website footer, header, sidebar, and page content. 

This method lets you customize menus no matter your WordPress theme. To get started, follow the easy steps below.

Step 1. Install SeedProd Page Builder

First, download the SeedProd plugin and install and activate it on your WordPress site.

For help with this step, you can follow our guide on how to install SeedProd.

Step 2. Choose a Landing Page Template

Once the plugin is activated, navigate to SeedProd » Landing Pages from your WordPress dashboard, and click the Add New Landing Page button.

Add a new landing page with SeedProd

This will bring up a library of landing page templates that you can use to build a custom page quickly. 

landing page templates

Each template is fully customizable to suit different website niches. For example, clicking the “Lead Squeeze” tab along the top shows templates best suited to creating squeeze pages.

When you find a design that fits your needs, hover over it and click the orange checkmark icon.

Choose a landing page template

Now a window will pop up that allows you to enter a page name and URL. After entering these details, click the Save and Start Editing the Page button.

landing page info

Step 3. Customize Your Page Content

The next screen will show your landing page inside SeedProd’s visual page builder. It will have blocks, sections, and settings on the left and a preview of your page on the right.

Landing page builer interface

Any changes you make to your page will appear automatically in real time. This way, you can ensure it looks good before you publish the changes.

Customizing the template content is as simple as pointing and clicking. For example, to change any text content, click it, delete the existing text, and replace it with your own.

customize page content

To add new features to your page, such as an image or a call-to-action button, find the block in the left-hand panel and drag it onto the page.

customize images

Continue replacing the template content with your own until you have a design you’re happy with. For more customization help, see our guide on how to create a landing page in WordPress.

Step 4. Customize the WordPress Menu

After customizing your page, you can create menus and customize them easily. Our template doesn’t include a header area, so we’ll need to make one first.

To do this, find the Column block and drag it to the top of your page.

SeedProd column block

Next, choose a layout. In this case, we’re using a 3 column layout.

Choose a column layout

Now let’s set up the header area with an image block to display your website logo.

Add an image block to menu

To upload your logo image, click the “Use Your Own Image” button in the block settings panel. This allows you to choose an image from your WordPress media library or upload one from your computer.

Upload a custom logo for your menu

Next, find the Nav Menu block and drag it into another column in your header. This is where you can add menu items for users to click and visit other pages on your site.

Add the nav menu block

In the block settings, there are 2 ways to display your menu.

The Simple menu type lets you add individual menu links without leaving the page builder. Simply add a menu name and paste your custom link.

Simple WordPress menu

You can also make the link target no follow and open it in a new tab.

The WordPress Menu type lets you display menus you’ve already made in WordPress. Clicking the dropdown menu will show all menus available on your site, such as the Primary Menu or Main Menu.

Advanced WordPress menu option

All you need to do is select menus to display them in your header.

SeedProd has advanced customization options for both menu types. In the Advanced tab, you can change menu colors, fonts, text shadows, hover colors, and more.

Advanced WordPress menu customizations

You can even display your menus in a vertical or horizontal layout. The vertical design is excellent for sidebar widget areas and footer menu locations.

To manage your menus, click the Menus Screen link or navigate to Appearance » Menus from your WordPress admin.

Manage menu appearance

Here you can edit your menu structure, add new menu items and sub-menus by clicking the checkboxes, and manage locations. You can even create a new menu on this page.

Remember to click the Save Menu button to save your menu functions.

Many websites use buttons in the site navigation to promote a specific call to action. With SeedProd’s button block, you can create a Menu Button in a few clicks.

Simply find the button block and add it to your header area.

WordPres menu button

Then in the block settings, you can add your menu link and customize the button style.

Menu button customization settings

Step 5. Publish Your Custom Page

Once you’re happy with how your page looks, click Save and Publish in the top right corner of the screen.

Publish WordPress menu

From there, you can visit the page to see your custom WordPress menu in action.

Custom WordPress menu example

How to Customize WordPress Menu with WordPress Site Editor

The first method is an excellent solution for any website, regardless of which theme you use. However, if you’re using a block-based WordPress theme, like Twenty Twenty Three, you may prefer using the WordPress site editor to customize your menu.

Please note: this method doesn’t work with every theme or let you customize every part of the menu.

To open the site editor, navigate to Appearance » Editor from your WordPress dashboard.

WordPress site editor

On the next screen, click the Patterns tab.

Site editor patterns

From there, click the Header option and choose your Header template.

Site editor header template

Here, you can drag and drop to rearrange the menu position or remove items from the menu.

You can also click the pencil icon to edit the menu styling.

Customize menu in site editor

For example, you can adjust the menu background color, fonts, padding, margins, borders, and more.

Customize menu background color

If you scroll down to the Advanced tab, you can enter custom CSS classes.

Custom menu CSS classes

To add another menu option, like a header button, click the Add Block icon.

Add button block to WordPress menu

Now you can search for a block and click it to add it to your menu and customize it like any other WordPress block.

When you’re happy with the menu settings and customizations, click the Save button.

You can now visit your site to see your custom menu.

Custom WordPress menu with site editor example

How to Customize WordPress Menu Without a Plugin

If you don’t want to set up a page builder plugin and don’t have a WordPress block theme, you can always use code to add a custom navigation menu.

For this, we recommend using a WordPress code snippet plugin like WPCode. It’s the safest and easiest way to add custom code to WordPress without editing core WordPress files, like your functions.php file.

To do this, install the free WPCode plugin, then go to Code Snippets » Add Snippet from your WordPress dashboard.

WPCode Add Snippet

On this page, you’ll see ready-made snippets you can add to your site with a few clicks.

For this tutorial, we want to make our own snippet, so hover your mouse over ‘Add Your Custom Code,’ and click the Use snippet button.

Use Custom Snippet

Now enter a title for your snippet, open the “Code Type” dropdown, and click PHP Snippet.

PHP Code Snippet type

Next, paste the following snippet into the code editor:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

This snippet adds a new menu location to your theme, “My Custom Menu.”

Once you’ve done that, scroll down to the insertion options and choose the “Auto Insert” method to add the snippet across your entire site.

From there, open the “Location” dropdown menu and click Run Everywhere.

Run snippet location everywhere

Now you can scroll to the top of the screen and click on the “Inactive” toggle to change it to “Active.”

Finally, click Save to make the snippet live.

Save custom code snippet

Now, head to Appearance » Menus and see the ‘Display location’ area.

You should see a new ‘My Custom Menu’ option in this area where you can add menu items.

Custom menu in WordPress

The next step is to add your custom menu to your WordPress theme.

You can show a custom navigation menu anywhere on your site by adding code to your theme’s template file.

Simply go to Appearance » Theme File Editor.

Then, in the right-hand menu, find the template where you want to add the menu, such as your website’s header.

WordPress theme file editor

Now you’ll need to add a wp_nav_menu function and specify the name of your custom menu. For example, in the following code snippet, we’re adding My Custom Menu to the theme’s header:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

After adding the code, click the Update File button to save your changes.

Update theme file

Now if you visit your site, you’ll see the custom menu in action, however, you’ll notice it appears in a simple bullet list.

Default custom WordPress menu

You can style the menu to better match your WordPress theme or branding by adding custom CSS code to your site.

To do this, go to Appearance » Customize and click on Additional CSS in the WordPress customizer.

This opens an editor where you can type your custom CSS.

WordPress customizer additional CSS

Now you can style your menu using the CSS class you added to your theme template. In our example, it’s .custom_menu_class.

In the following code, we’re adding margins and padding, setting the text color to black, and arranging the menu in a horizontal layout:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
    display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 
 
div.custom-menu-class a {
    color:#000;
}

The WordPress customizer updates automatically so you can see how the menu looks with the new style. If you’re happy with the changes, then Publish to make them live.

How to customize WordPress menu with CSS

More WordPress Navigation Tips

We hope this guide has helped you learn how to customize your WordPress menu. For help to get more out of your WordPress navigation, check out the following tips and tutorials:

Thanks for reading! We’d love to hear your thoughts, so please feel free to leave a comment with any questions and feedback.

You can also follow us on YouTubeX (formerly Twitter), and Facebook for more helpful content to grow your business.

author avatar
Stacey Corrin Writer
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Add A Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.