WordPress Navigation Menu: Tips And Tricks To Customize It

WordPress Navigation Menu: Tips And Tricks To Customize It

WordPress navigation menu in WordPress is just like a road sign, you cannot reach your destination until you know your current location. Similarly, WordPress navigation menu CSS plays an utmost role in your WordPress site.

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

Furthermore, WordPress navigations menu is one of the most active parts of websites. Talking about WordPress (blogging platform) – Themes handle where and how navigation menus are displayed. It also allows customization navigation menu.

Let’s understand the complete WordPress Navigation menu tutorial. Before the start, we will tell you – what actually WordPress navigation menu is? Keep reading this guide.

Navigation menu in WordPress

The navigation menu is a built-in feature of WordPress theme used to direct the user to other features or pages of the website. Further on, it makes it very easy to add, create and eliminate unnecessary menu from the WordPress.

However, WordPress navigation menu’s location can differ from theme to theme. All WordPress themes come with at least one menu location. But some of them have multiple locations to face complicated sites. Likewise, you can customize your menus for footer and header part in a different pattern.

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

Why add the WordPress navigation menu?

Navigation menu code in WordPress offers 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, though, you can only display them 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 efficient enough to manage as a WordPress menu.

Now let’s have a look at the process of creating navigation menu-

How to create WordPress navigation menu?

Before you start adding the navigation item, you need to create it. Following are the steps for the same:

  • Navigate to your WordPress dashboard and click on the Appearance>>Menus. As shown in below screenshot:

Navigation menu settings

  • Now, it’ll ask you the 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, where to assign the menu, check that box & click Save Menu button.

Navigation menu

Well done! you have successfully created a navigation menu.

Now it’s time to add some items to this navigation menu. This is the first thing we do while 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. Here, you’ll notice that there are different sections such as Pages, Posts, Custom Links, and Categories.

  • Posts & Pages: allows you to add links to any of your published posts or pages.
  • Custom Links: allows you to add both internal and external links.
  • Categories: allows you to add different categories links.

Check that box where you want to add a link. And then click on ‘Add to Menu’ button. Suppose that, you want to add a link to your ‘contact us’ page, so check ‘contact us’ page box and click ‘Add to Menu’ button.

add an item to the navigation menu

Once you click Add to Menu, you’ll see it appearing on the right side. Shows that you have successfully added the navigation menu item.

Further, there is another way to add Navigation menu in WordPress by using Shortcode. If you are a good coder, it’s going to be an easy task for you.

Adding navigation menu item using the shortcode

As we have illustrated above, how to create your navigation menu?. Once your menu is ready, the next thing you need to take care of is how to add it to your posts by using a shortcode. Let’s see:

To do this, just edit a page or post where you want to display your menu. Thereafter,

  • Add a shortcode like this:

[listmenu menu=”My menu”]

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

That’ it! You have successfully added your navigation menu in WordPress.

Adding WordPress navigation menu item using a plugin

You can also add your menu item with the help of the WordPress navigation menu plugin. Here, you won’t require any coding knowledge.

  • Simply, install and activate the Menu Icons plugin and add your menu item.
  • After the activation process, go to appearance>>menus.
  • Thereafter, open your navigational menu. Then choose a page in menu structure on which you want to show your menu item.
  • Now select the item and click on the “Save Menu” button.
  • That’s it! You have successfully created it.

Now, let’s talk about how to remove WordPress navigation menus items:

Removing an item from WordPress Navigation Menu?

You can also remove menu items from your navigation menu. Click the down arrow icon and select ‘Remove’ button. See in below screenshot.

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.

How to style WordPress navigation menus

After creating a navigation menu, WordPress offers you many impressive ways to customize your menu. To style your Navigation menu you need to edit CSS script of your WordPress. It can be done by two methods. Let’s have a look:

Method 1. Styling WordPress Navigation Menus Using a Plugin

This is the best method for beginners because it saves you from editing theme file and you will not require any coding knowledge.

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 WordPress plugin, which allows you to design your own WordPress theme without writing a line of code (without HTML or CSS).

On activation, you will be redirected to 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 plugin will highlight it by showing the borders around it. When you click on the highlighted navigation menu, it will display you those items that you can edit.

Demo site

Now, the plugin 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.

If you feel satisfied, click the Save button in the CSS hero toolbar to store your changes.

Methods 2. Manually styling WordPress navigation menus

Add custom CSS manually, which can be done easily if you are at least an intermediate user.

The WordPress navigation menus widgets 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 class name 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, a 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, using a css class code like this:

<?php
wp_nav_menu( array(
‘theme_location’ => ‘primary’,
‘menu_class’ => ‘primary-menu’,
) );
?>

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

You can also style your navigation menu by using this given below CSS structure.

Navigation menu by CSS Structure
navigation menu by css structure

You will also have to change the #header with the container CSS class used by your navigation menu. And this structure will help you 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. And all these classes also allow you to customize your navigation menu. Let’s take a look:

Customize class code
Customize class code

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. To do this:-

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

Custom Color

Once you check that box, while editing each individual menu item you will notice an additional field is added.

edit each individual menu item

To add your custom CSS you can also use this CSS class in your stylesheet. However, it will effect on your menu item with the CSS class that you have added.

Now we will show you some examples of the style Navigation menu. Go through the example list for a better experience.

Examples of Styling Navigation Menus in WordPress

There are various WordPress themes, each & every theme can use different style options such as CSS classes, and even Javascript in WordPress navigation menus. However, it gives you a lot of options to customize your navigation menu and to change styles.

Furthermore, the inspect tool in the web browser will help you to configure which CSS classes to change.
Typically, click the element that you want to modify. And press the right-click and choose to inspect tool from browser’s menu.

element that you want to modify

Given below are some examples of style navigation menus in WordPress:

#1. Change your font color in WordPress Navigation Menus

You can change your font color of navigation menus by adding given-below custom css class code to your theme.

#top-menu li.menu-item a {
color:#ff0000;
}

Here, in the above code – the “#top-menu” is the ID that is allocated to the unordered list and shows the navigation menu. Further, by using the inspect tool you can configure that the ID is used by your theme.

change font color of navigation menu

#2. Change the background color of the WordPress navigation menu bar

The very first thing is, to find the CSS ID of your theme.

nav menu class

Afterward, use the given-below custom CSS code in order to change the background color of the WordPress navigation menu bar. Now your site looks like this:

.navigation-top {
background-color:#000;
}
#3. Change the background color of your single menu item

You might have seen that different sites use different colors for important links to make them get noticed. These links can be a sign-up link, login link, contact link etc. To accomplish it-

You will need to add a custom CSS class (which you want to highlight) to your navigation menu item.

To do this – open your WordPress dashboard and go to Appearance>>Menus. You will see a ‘Screen Options’ button, click on it. After that, a fly down menu will open, here you have to check the ‘CSS Classes’ box option.

css classes option

Thereafter, go to the menu item that you want to modify and click to expand it. After doing this, you will see a new option to add your custom CSS class.

Thereafter, use the given-below CSS class code to style that menu item differently.

.contact-us {
background-color: #ff0099;
border-radius:5px;
}

Now your site will look like this:

single menu item

#4. Adding Hover Effects to WordPress Navigation Menus

Now you can also change the color of your menu item on mouse-over, this CSS trick makes your navigation menu more interactive. Follow the given-below custom CSS code and add it to your theme.

#top-menu li.menu-item a:hover {
background-color:#fff;
color:#666;
border-radius:5px;
}

In the above example, “#top-menu” CSS ID is used by your theme for unordered navigation menu list.

Now, you can see how your site look:

CSS ID

#5. Creating Sticky Floating Navigation Menus in WordPress

The sticky floating menu allows you to create any element on your landing pages sticky. That means, whenever you will scroll down, your menu items will get disappear. This is usually used to keep your menus at the top of your page.

You will have to choose the right selector for the element you want to make sticky and make sure it’s a unique selector, for that you should be aware of the basics of HTML/CSS. Sometimes a selector, for example, “nav”, “.menu-main-menu-1” is sufficient while 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 selector 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 finds out the possible reasons that 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.

Method 1. Adding Sticky Floating Navigation Menu via Plugin

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

First of all install and activate the Sticky Menu on Scroll Plugin.

stickymenusettings Customize WordPress Navigation Menu

After activation Go to 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 a right click, 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.

Method 2. Adding Sticky Floating Navigation Menu Manually

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

Firstly visit Appearance » Customize for launching theme customizer.

additional css

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 simply be 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. Creating transparent navigation menus in WordPress

Transparent navigation menu in your WordPress site makes your navigation item visible, to let the users see your menu clearly.

For example, a lot of sites use fullscreen background images with the call to action buttons. Because by doing this, users have more possibility to focus on your call to action button. But the question is how to do it? Have a look we will show you with few steps:

To make your navigation menu transparent you have to add the given-below custom CSS code to your theme.

#site-navigation {
background-color:transparent;
}

Now you can see how your site look:

creating transparent navigation menu

You can also fix the header image position if needed so that the image can cover the behind area of your transparent menus. But it depends on your theme.

Over to this, another interesting thing is that – you can add the archive page in your 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.

Adding 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 see 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, named as ‘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 a single page.

To add a link to your custom post type archive page in WordPress navigation menus, follow the given steps.

Adding Link to Custom Post Type Archive

Go to the Appearance>>Menus page. You will see a tab for each of your custom post types in the left column.

add link to custom post type archives

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.

archive post type menu

By default, this will use the name of your custom post type with the word archives for the link label.

If you want to change it into something simple, edit it, click the menu item and then change its navigation label.

menu label

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.

cpt archive page

Just like the pages and posts, you can also 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.

cpt entries

Press the save menu button to save your changes.

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

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

custom links

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. Before that let’s get an overview for Mega Menu.

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 to 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. Before this, we will share how to create it.

Creating Mega Menu in WordPress

Creating a Mega Menu is not a difficult task. Follow the steps to create a mega menu in WordPress.

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. Once completed you can close the popup and visit your website to see the mega menu in action.

Adding mega menus in WordPress

At very first, 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.

Another thing that we would like to share is the Logout link in the navigation menu. So many times 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.

Adding logout link in 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 have 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. Let’s see how to add it:

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 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 the users (log-out and logged-in both). It only makes sense to display WordPress logout links to those users who are actually logged in.

Adding WordPress Logout Link in the Sidebar Widget

However, 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

More so 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 helped 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 it with others as well. 



Leave a Reply