How to customize WordPress Navigation Menu?

WordPress Navigation Menu is a built-in feature of WordPress menu to direct the users to other featured that the websites contain. So, user’s visit our whole sites through this navigation bar or able to understand the whole page functionality of the particular websites that would be diverse from each other in a specific way. They allow users to add categories, Posts, URLs and Pages to the menu.   

Navigation menu allows theme designers to use where it is necessary and to let users custom menus of their websites.

Customization Of WordPress navigation menu

WordPress provides multiple themes so you can customize the navigation menu in an easy way to add more pages or features to the website. Not only this, by using WordPress you can modify, add, create, eliminate unnecessary menus from WordPress and much more things.

Thus, you can create a lot of navigation menus as a need in the websites. By using WordPress themes your websites become attractive, understandable to navigate the different pages of your websites.

WordPress has a unique theme for every different type of sites and many other functions through which you can also add items to your navigation menu and customize it. If you have any query look at our WordPress support services.

There are so many ways to customize the navigation menu:-

    • Add an item to the navigation menu  
    • Styling navigation menu
  •    Place stick on the top of the page
  •    To add a search box to the WordPress menu

Add an item to the navigation menu

You can add menu items to your navigation menu with the help of different things are as follows:-

Add navigation by using plugins

You can also add an item with the help of plugins. Simple steps you should follow to use this are –

  • You just have to install and activate the menu Icons plugin and add your menu item.
  • After installing and activation, just go to Appearance->>Menus.
  • After that, open your navigational menu. Now choose a page in menu structure on which you want to show your menu item.
  • Last step is to select an item and click on the “Save” button for saving your activities.

Note:-You can also remove an item from your navigation menu. You just only have to click the down icon and select ‘Remove button.’  

Add navigation menu by using the shortcode

After creating your menu you can add it to your posts by using a shortcode.

You just only have to edit a page or post where you want to display your menu as follows :

[List menu = ”Menu name ”]

You can change the menu name that you want on the navigation bar.

Styling navigation menu

You can make your websites more interactive and attractive with the help of WordPress.To style your navigation menu you need to edit your CSS script of your WordPress. It can be done in two ways:-

  1. Styling menus using a plugin – The main thing is that you will not require any coding knowledge so you can easily edit your theme file. If you are beginners and not familiar with CSS then you can try CSS Hero because it is one of the wonderful WordPress Plugins. With the help of these plugins and also without writing code, you can easily design your WordPress Themes.

Follow the steps to proceed further :

A : After activation, you just have to click the CSS Hero button as shown below in your WordPress admin toolbar.Firstly you redirected to your CSS Hero license key and then you will be redirected to back to your websites.


b:– After that, you will be directed to your site with the floating CSS Hero Toolbar appearing on the screen now you need to click the blue icon at the top and go to navigation menus. Here you can edit, highlights navigation menu etc.

Now, various properties of plugins will be displayed here like margin, background, text, padding, border etc.

c:- Lastly don’t forget to click on the SAVE button to save changes.

  1.  Manually styling navigation menus:- For this, you have  coding knowledge, this is

     not for beginners.

     To order the navigation menu widgets you can use the default WordPress menu tag :

                          <?php wp_nav_menu():?>

This will work if you have only one menu location. For multiple location the css class code like as follows :


                          wp_nav_menu( array(

                         ‘theme_location’ => ‘primary’,

                          ‘menu_class’ => ‘primary-menu’,

                          ) );


You can also design your menu or style by using the CSS structure.

Place menu stick on the top of the page

For making menu sticky on the top of the page you just have to little bit knowledge of coding or css. You only have to add a piece of code to your Style.css file. Some basic steps are as –

  1. First of all, you open your Stylesheet (style.php)
  2. Then find .nav-menu or .genesis-nav-menu (or similar, depending on the theme you are using)
  3. Use the  following code for your main menu container:
.nav-menu {


                           background: #333;

                           top: 0px;

                           right: 0px;

                           left: 0px;



To add a search box to the WordPress menu

With the help of the search box, the visitors can search the information through keywords that helpful for them to see the results throughout the websites. You just only have to do the following steps:-

     1.Open functions.php

     2.Write the following code on the page that is named as function.php.

add_filter( ‘wp_nav_menu_items’,’add_search_box’, 10, 2 );

                 function add_search_box( $items, $args )


                  $items .= ‘<li>’ . get_search_form( false ) . ‘</li>’;

                  return $items;


Save changes

That’s All!

All comments.