How To Customize WordPress Navigation Menu [Complete Guide]

How To Customize WordPress Navigation Menu [Complete Guide]

“Creativity attracts more”. People are innovative about everything they are doing. Because it’s something which makes them different from others.

As we all are aware there is great diversity in online business and websites. And the difference is not because of the content only. But, also due to the experiments, they do with normal features of their website like with navigation menu.

Navigations menu is one of the most active parts of websites. Talking about WordPress, themes handle where and how navigation menus are displayed. It also allows customization navigation menu.

WordPress also offers Mega Menus plugins that support multiple menu locations and other attractive features.

In this post, we’ll show you how to customize WordPress navigation menu. Before we start let’s understand what is navigation menu in WordPress.

What is the navigation menu?

Navigation menus are in build feature of WordPress theme used to direct the user to other features or pages of the website. And you can freely free to add, create and eliminate unnecessary menu from the WordPress.

The WordPress theme can support more than one navigational menu. Like you can customize menus for footer and header part in a different pattern.

Let’s understand why it’s necessary to add navigation menus to any website.

Why do we add WordPress Navigation Menu?

Although, Navigation menus in WordPress offer a simple way to add a structured menu to your website.

Thus, you can create a lot of Navigation menus as you want in your WordPress Admin Area. But, you can display them only on the menu locations available in your WordPress theme.

What if you are required to add a menu to a post or page? In that case, you have to manually create a list of links that are not as efficient enough to manage as a WordPress menu.

Now let’s take a look at the process of adding navigation menu-

Add Navigation menus in WordPress posts or pages

The very first thing, you have to install the Shortcode in Menus plugin and then activate it. To know more, see our guide on how to install a plugin in WordPress.

Before using the plugin, first, create the Navigation menu you want to display. Visit the Appearance>> Menus to create it.

Navigation menu settings
Now, it’ll ask you Menu Name. Enter your menu name and click on Create Menu.

Navigation menu setup

After creating your menu, WordPress will show you a Menu Settings section. In this Menu Settings, you can choose a Display location, where to insert your navigation menu on your website.

Navigation menu

Once you find that where to assign the menu, check that box & click Save Menu.

Navigation menu

Well done! you have successfully created a navigation menu. Now it’s time to add some items to this menu.

This is the uppermost thing we do when we add a Navigation menu. Let’s see how to add an item in the navigation menu.

How to add an item to the navigation menu?

You can add items to your navigation menu and also customize it. To add an item to your navigation menu, go to the sidebar. you’ll notice that there are different sections such as Pages, Posts, Custom Links and Categories.

add an item to the navigation menu

Now where you want to add a link, check that box and click on Add to Menu

Add to Menu

Once you click Add to Menu, you’ll see it appear under on the right side.

Menu Structure

Another way to add Navigation menu in WordPress is shortcode. If you good in coding it’s going to be an easy task for you.

Add Navigation Menu Using Shortcode

Once your menu is ready, you can add it to your posts by using a shortcode. Just edit a page or post where you want to display menu.

  • Add a shortcode like this:  

[listmenu menu=”My menu”]

However, you can change My menu with the name of the navigation menu you want to assign.

That’ all in Adding menu in WordPress. Now, see the process of removing menus in WordPress.

How To Remove An Item From Navigation Menu?

If you want to remove an item from your navigation menu. click the down arrow icon and select Remove.

Menu Structure

By default, your menu will be shown as a plain list. If you want to change the appearance of your menu, you need to style navigation menus in WordPress.

Style WordPress Navigation Menus

After creating a navigation menu, WordPress offers you to customize your menu in an impressive way. To style your Navigation menu you need to edit CSS script of your WordPress and this is done by two methods. Let’s have a look.

#1. Styling WordPress Navigation Menus by Using a Plugin

You can add your custom CSS for menus in your stylesheet of the child theme or by using the simple custom CSS plugin. If you are not familiar with CSS, then you can try CSS Hero. This is a powerful plugin, allows you to design your own WordPress theme without writing a line of code (without HTML or CSS required).

On activation, you will be redirected to get your CSS Hero license key. Just follow the instructions on the screen, and you will be redirected back to your website in just a few clicks.

After that, you have to click the CSS Hero button in your WordPress Admin Toolbar.

style Navigation menu

However, CSS Hero provides a WYSIWYG (What you see is what you get) editor. And after that, clicking on the button will take you to your site with the floating CSS Hero Toolbar appearing on the screen.

To start editing you need to click the blue icon at the top and move your mouse to your navigation menus. your CSS Hero will highlight it by showing the borders around it. When you click on the highlighted navigation menu, it will display you the items that you can edit.

Demo site

Now, CSS Hero will display you various properties, which you can edit such as background, border, text, padding, margin etc.

display you various properties

You can click on the property you want to change. As soon as you make changes, you will be able to see them live in theme preview.

After being satisfied, click the Save button in the CSS hero toolbar to save changes.

#2. Manually add Style WordPress Navigation Menus

For this method, you need to add custom CSS manually and is meant for intermediate users.

Thus, the WordPress navigation menus are shown in an unordered list (bulleted list).

Typically, if you use the default WordPress menu tag, it will show a list with no CSS classes associated with it.

<?php wp_nav_menu(); ?>

In your unordered list, the name of the class with each list item will be ‘menu’, which should have its own CSS class.

This work can be done if you have only one menu location. However, you can display the navigation menu in multiple locations in most themes.

By using only the default CSS class may conflict with the menus on other locations.

That’s why you have to define the CSS class and menu location too.  Also, there are some chances that your WordPress theme is already doing this by adding a navigation menu by using a code like this:

<?php

wp_nav_menu( array(

‘theme_location’ => ‘primary’,

‘menu_class’ => ‘primary-menu’,

) );

?>

Also, this code tells the WordPress that this is where themes show the primary menu. Also, it adds a CSS class primary menu in the navigation menu.

Now, you can style your navigation menu by using this CSS structure.

Navigation menu by CSS Structure

// container class

#header .primary-menu{}// container class first unordered list

#header .primary-menu ul {}//unordered list within an unordered list

#header .primary-menu ul ul {}// each navigation item

#header .primary-menu li {}// each navigation item anchor

#header .primary-menu li a {}// unordered list if there is drop down items

#header .primary-menu li ul {}// each drop down navigation item

#header .primary-menu li li {}// each drop down navigation item anchor

#header .primary-menu li li a {}

Also, you will have to change the #header with the container CSS class used by your navigation menu. And this structure will help you to completely change the appearance of your navigation menu.

Although, there are other WordPress generated CSS classes that are automatically added to each menu and menu item.

Thus, all these classes allow you to customize your navigation menu even further.

Customize class code

// Class for Current Page

.current_page_item{}// Class for Current Category

.current-cat{}// Class for any other current Menu Item

.current-menu-item{}// Class for a Category

.menu-item-type-taxonomy{}// Class for Post types

.menu-item-type-post_type{}// Class for any custom links

.menu-item-type-custom{}// Class for the home Link

.menu-item-home{}

Also, WordPress allows you to add your own custom CSS classes to individual menu items.

You can use this feature by style menu items, such as adding an image icon to your menus or highlighting the menu item by simply changing the color.

Go to Appearance>>Menus page in your WordPress Admin and click the Screen Options button.

 

Custom Color

Once you checked that box, you will see that an additional field is added when you edit each individual menu item.

edit each individual menu itemAlso, you can use this CSS class in your stylesheet for adding your custom CSS.

Thus, this will only affect the menu item with the CSS class you added. Another method to style Navigation menu is a plugin. Let’s have a look!

There are many other examples of the style Navigation menu. Let’s go through the list for a better experience.

Examples of Styling Navigation Menus in WordPress

Various WordPress themes can use different style options, CSS classes, and even Javascript to create navigation menus. However, it gives you a lot of options to customize your navigation menu to change those styles and meet your needs.

Also, the inspect tool in your web browser will be your best friend. When it should be done to find out which CSS classes to change.

Basically, you need to point the cursor to the element that you want to modify. And then press the Right-click and select Inspect device from the browser’s menu.

element that you want to modify

Let’s see some examples of style navigation menus in WordPress.

1. How to Change Font Color in WordPress Navigation Menus

Here’s the sample custom CSS that to change the font color of the navigation menu you can add to your theme.

#top-menu li.menu-item a {

color:#ff0000;

}

Here, in this example, the #top-menu is the specified ID to the unordered list that shows our navigation menu. Also, you need to use the inspect tool to know the ID used by your theme.

top-menu is the specified ID

2. How to Change Background Color of Navigation Menu Bar

First, you have to find the CSS ID or the class used by your theme for the container surrounding Navigation Menu.

CSSNext, you can use the following custom CSS to change the background color of the navigation menu bar.

.navigation-top {

background-color:#000;

}

Here’s how it looked at our demo website.

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

However, you may have noticed that a lot of sites use a different background color for the most important links in their navigation menu.

Thus, this link can be a, sign up, log in, buy button, or contact. Also, giving it a different color, making this link more noticeable.

To achieve it, we will add a custom CSS class to the menu item, which we want to highlight with a different background color.

To do this, Go to Appearance>>Menus and then click the Screen Options button at the top right corner of the screen. Also, it will bring a fly down menu where you have to check the box next to the ‘CSS Classes’ option.

Now, you have to scroll down to the menu item that you want to modify and then click to expand it. And now, you will see a new option to add your custom CSS class.

However, you can use this CSS class to style that particular menu item differently.

.contact-us {

background-color: #ff0099;

border-radius:5px;

}

Here’s how it looked at our test website.

Customize WordPress Navigation Menu

4. Adding Hover Effects to WordPress Navigation Menus

Are you want, your menu items change the colors on mouse-over? This special CSS trick makes your navigation menus look more interactive.

Just add the following custom CSS in your theme.

#top-menu li.menu-item a:hover {

background-color:#fff;

color:#666;

border-radius:5px;

}

Here, in this example, the #top-menu is the CSS ID that is used by your theme for the unordered navigation menu list.

Here’s how it looked at our test website.

CSS ID

5. Create Sticky Floating Navigation Menus in WordPress

The Sticky Menu in WordPress grants you to create any element on your pages sticky as long as it blows the top of the page whenever you scroll down. This is usually used to keep menus at the top of your page, the plugin helps you in making any element sticky

You should know the basics of HTML/CSS. You need to know how to choose the right selector for the element you want to make sticky and make sure it’s a unique selector. Some of the times a selector for example “nav”, “.menu-main-menu-1” is sufficient. Other times you will have to be more concise and use a more brief selector like “header > ul:first-child” or “nav.top .menu-header ul.main”.

  • It is mainly used for navigation menus and grants you to select any precise element with a name, class or ID at the top of the page.
  • You can add any amount of between the sticky element and the top of the page. By doing this the element is not always stuck at the ceiling of the page.
  • It checks if the current user has an Admin Toolbar at the top of the page
  • It founds out possible reasons why your element doesn’t stick by switching on debug mode. The error messages will be displayed in your browser’s console.

There are two methods of adding sticky floating Navigation menu one by a plugin or by shortcode. Furthermore, go through both processes.

#1. Adding Sticky Floating Navigation Menu via Plugin

This is the easiest method to use and it is suggested for all users.

stickymenusettings Customize WordPress Navigation Menu

  • After activation Go Settings » Sticky Menu (or Anything!) page to configure plugin settings.
  • Enter the CSS ID of the navigation menu that you wish to make sticky.
  • Use your browser’s inspect tool for searching the CSS ID used by your navigation menu. After that visit your website and go to the navigation menu.
  • Then after right click and choose Inspect from your browser’s menu. And it will split your browser screen and you will be able to see the source code. Just look for the line of code given below:
<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
  • Next enter the navigation CSS ID in the plugin settings like this #site-navigation.
  • Define the space between the top of your screen and the sticky navigation menu. You can use this if your menu is coinciding an element that you do not want to be hidden. If not, then overlook this setting.
  • Click the checkbox next to the option: ‘Check for Admin Bar’.
  • The setting page acknowledges you to unstick the navigation menu when a user is visiting your website via a smaller screen. In case you don’t like it, then you can add 780px to this option.
  • Just click on the save settings button to save your changes. Now you can visit your website to see your sticky floating navigation menu in action.

#2. Adding Sticky Floating Navigation Menu Manually

This method needs you to add custom CSS code to your theme.

  • Firstly visit Appearance » Customize for launching theme customizer.

customcss

  • Next, Click on ‘Additional CSS’ in the left pane and then add the below-given CSS code.
#site-navigation

{

background:#fff;

height:60px;

z-index:170;

margin:0 auto;

border-bottom:1px solid #dadada;

width:100%;

Position:fixed;

Top:0;

Left:0;

Right:0;

text-align: center;      

}

  • After that replace #site-navigation with the CSS ID of your navigation menu, click on the Save & Publish button.
  • Now you can visit your website to view your sticky floating navigation menu in action. If your navigation menu normally displays after the site header, then this CSS code could overlie the site title and header.
  • It can be simply adjusted by adding a margin to your header area using some CSS like shown below.
 .site-branding {
 margin-top:60px;
  }
  • At last, replace site-branding with the CSS class of your header area.

6. Create Transparent Navigation Menus in WordPress

However, a lot of websites use the large background images along with the call to action buttons.

It creates your navigation blend with the image by using the transparent menus. And this makes the users more likely to focus on your call to action.

To make your navigation menu transparent just add the following sample CSS to your theme.

#site-navigation {

background-color:transparent;

}

How does it look at our demo site?

transparent-menu

Based on your theme, you also may need to adjust the position of the header image. So that it can cover the area behind your transparent menus.

Another interesting thing that you add in WordPress archive page in the navigation menu. This archive page shows a list of all the posts under a specific category, post type, or tag. Let’s see the process.

Custom Post Type Archives in WordPress

In WordPress, the word ‘Archives’ is used for a list of entries from a taxonomy or post type (such as tags or category). In case archives are enabled for the custom post type, you can show them on your site.

Generally, the URL of a custom post type archive page is like this:

http://example.com/post-type-slug/

Post type slug is a good name for your custom post type. For example, we have a custom post type, which is called ‘Deals’, and you can see its archive page on a URL in this format:

http://www.example.com/deals/

You can add a link to your custom post type archive page in your site’s navigation menu. It will allow your users to view all the previous entries posted on that post type on the single page.

Now time arrives to know how to add a link to your custom post type archive page in WordPress navigation menus.

In custom page archives, you need to add links too. Let’s see how to add links to it.  

Adding Link to Custom Post Type Archive

First thing, you need to go to the Appearance>>Menus page. You will see a tab for each of your custom post types in the left column.

Post Type Archive

 

  • To expand this, you will need to click the name of your custom post type and then click on the ‘View all‘ tab.
  • Now, you will see an option for your post type archives. Check the box next to it and then click the Add to the menu button.
  • Now your custom post type archive will appear in the right column as a menu item.

Post Type Archive

  • By default, this will use the name of your custom post type with the word archives for the link label.
  • You want to change it into something simple. To edit it, click the menu item and then change its navigation label.

Post Type Archive

  • Keep in mind that don’t forget to click the Save menu button to save your changes.
  • Now you can visit your site to view the custom post types archive links in your WordPress navigation menu.

Post Type Archive

  • Just like the pages and posts, also you can add a single entry from your post type to the navigation menu.
  • Simply choose an entry and after that click the add to the menu button.

Post Type Archive

  • Press the save menu button to save your changes.

That’s all in Navigation menu style. Moreover, you may notice sometimes custom post type doesn’t appear on the menu screen. To make it visible in the Menu screen

The Custom Post Type Does not Appear on Menus Screen

  • The Custom post types require to match certain requirements in order to be displayed on the Appearance>>Menus page.
  • First, you need to ensure that there is an archive page for your custom post type. Usually, this is a URL like this:
http://example.com/movies/
  • Change example.com with your own domain name and change movies with your post type.
  • If you can view entries from your post type on this page, it means that your post type supports archives but does not support other requirements.
  • The good news is that you can still add your custom post type archive page as a custom link.
  • Go to the Appearance>>Menus page and after that click the ‘Custom Links‘ tab to expand it.

Post Type Archive WordPress Navigation Menu

  • Enter the URL of your custom post type archive page in the URL field. And then add the label that you want to display in the link field.
  • After this, click the add menu button, and you will see that the custom link will appear in the right column.

Post Type Archive

  • Now you can click the Save menu button to save your changes.

For more customized styles with beautiful menu items, WordPress offers you many Mega Menu plugins. Let’s see how to add a mega menu plugin. Before that let’s get an overview for of Mega Manu.

Mega Menu in your WordPress website

mega manus 2

Mega menus are a general design pattern on large WordPress sites. Such sites may have a complex information architecture with various sections and subsections.  It makes it easier for the user to find correct information rapidly by grouping similar links together. They are an excellent design choice for accommodating the big number of options or for announcing lower-level site pages at a glance.

Moving on, here you will learn how to add Mega menus in WordPress Navigation menu

Mega Menus are generally helpful for sites with many contents. It allows website owners to display more items on their top menu.

Some of the famous websites like Reuters and Buzzfeed use mega menus for showing interactive navigation menus.

While the default WordPress navigation menus allow you add drop-down sub-menus and even add image icons next to each item, some of the times you just require a mega menu.

Let’s see how to easily add a mega menu to your WordPress website.

Add Mega menus in WordPress

  • First of all, install and activate the Max Mega Menu plugin. It is the best free WordPress plugin available in the market. For more information, see our step by step guide on how to install a plugin in WordPress.
  • After the activation, the plugin will add a new menu item, Mega Menu, to your WordPress admin menu. Tapping on it will take you to the plugin’s settings page.

megamenu-settings

  • The default settings will work for most sites. Still, change the menu colors, so they match the colors used by your WordPress theme’s navigation menu container.
  • For finding which colors are used in your theme, you can use the Inspect tool in your browser. After you get the color hex code, paste it into a text file for using it later.
  • Up next visit the mega menu settings page, click on the Menu Themes tab and then tap on Menu Bar section. Here you can replace the background color used by the mega menu for matching your theme’s navigation menu container.

menubarcolors

  • After that click on the save changes button to save your settings.

Now that we have configured the mega menu settings, go ahead and create our mega menu.

Create Mega Menu

Creating a Mega Menu is not a hard task. Here we have the steps to create a mega menu.

  • Firstly visit the Appearance » Menus page and then add top-level items to your navigation.
  • Next, on the Menus screen enable mega menu. After that take your mouse to a menu item, and you will see a “Mega Menu” button appear on the menu tab.

enablemegamenu

  • Clicking on the button will show a popup. Here you can add any WordPress widget to your mega menu and choose the number of columns you want to display.

megamenu-widgets

  • You can also tap on the wrench icon on a widget to edit the widget settings. Just click on the save button to save your widget settings. After you have completed you can close the popup and visit your website to see the mega menu in action.

Another thing which we like to share is the Logout link in the navigation menu. So many time we have encountered with the question of how to add a logout link in the menu. In the next heading, we will cover the same.

The Logout Link for WordPress

Generally, you can log out of your WordPress website by clicking the logout link. The WordPress logout link is located below the profile picture in the top right corner of WordPress Admin Bar.

All you have to do is take your mouse at your username, and it will appear in the drop-down menu.

logoutadminbar
If your site administrator has disabled the WordPress Admin Bar, you will not be able to see the WordPress logout link.

The great thing is that the WordPress logout link can be entered directly to log out of your existing WordPress session.

The logout link for your WordPress site looks like this:

http://example.com/wp-login.php?action=logout

Note: Don’t forget to replace the example.com with your own domain name.

Also, you can access this link directly in your browser window to log out of your website.

When you go to the WordPress logout link, it will take you to a warning page. You will need to confirm that you want to log out in order to click on the logout link.

logoutwarning
Also, you can manually add this logout link anywhere on your website.

Way to add the WordPress Logout Link to Navigation menu

Let’s see how to do this.

Adding the Logout Link in WordPress Navigation Menus

Adding a WordPress logout link in the navigation menu of your website will make it easily accessible from any page on your WordPress site.

  • Just go to the Appearance>>Menus Page in your WordPress Admin.
  • Next, you have to click the custom links tab to expand it and click the logout link in the URL field.

logoutnavmenu

  • Once done, then click the ‘Add to menu’ button, you will see that the link will appear in the right column. Now you can adjust the position of it by simply dragging it up or dragging it down.
  • Don’t forget to press the ‘Save Menu’ button to save your changes.
  • Now you can visit your website to view the logout links in your navigation menu.

logoutlinkmenu

  • The problem of adding a logout link to the navigation menu is that it is visible to all users (log-out and logged-in both). It only makes sense to display WordPress logout links to those users who are actually logged in.

Add WordPress Logout Link in the Sidebar Widget

  • WordPress comes with a default widget called Meta. This widget displays a bunch of useful links containing the login or logout link to users.

metawidget

  • Some people know that other links in the Meta widget are not quite useful.
  • Alternatively, you can also add custom HTML widget or plain text with a logout link in plain HTML.

Here’s the HTML code that you need to add:

<a href=”http://example.com/wp-login.php?action=logout”>Logout</a>

WordPress Logout Link to Navigation Menu

Wrapping Things Up

The navigation menu on any website is an important part. So, we need to deal with it on priority. Because it does not only add to your site’s appearance but also gives direction to the visitor to take action accordingly.

We hope the article helps you to customize the navigation menu in WordPress website. Don’t forget to use the comment section to make a conversation.

If you like the content please share with others also.  



Leave a Reply