Customizing the Navigation Menu & Logo

The navigation menu is built using twitter bootstrap and uses a modified version of wp-bootstrap-navwalker class by twittem. Using it very simple. You do not need to do any programming on your end, just add a menu using Appearance  Menu and set it to the primary menu location of the theme.

Nav Menu

You can however, customize various components to add more styling. Read more to learn how.

Adding a logo

Header Logo

Customizing Navbar or Site Logo

Logo is managed over WordPress custom header. Simply go to Appearance  Header and upload a logo png of size 200X50.

If you remove header image, then the default site title will be used.

Creating a Menu

Creating menu from WordPress Appearance

Creating menu from WordPress Appearance

  • Start creating a menu by going to Appearance Menu.
  • Save your menu once you are done.
  • Assign the location “Primary Menu” to it.

That’s it.

Customizing the Menu

There are many ways to customize and add bootstrap components to the menu. All of them are given below.

Adding Icons to any element

Adding Icons to Navmenu items

Adding Icons to Navmenu items

Both glyphicons and icomoon icons are available. To add any icon, put the icon class inside the “Link Relationship (XFN)“. For a list of available icon classes, check this.

You need to enable it from the Screen Options. On the top right corner of your screen click on the button (beside the Help) that says Screen Options and enable Link Relation XFN.

Adding Dividers between items

Adding Dividers to the Navmenu

Adding Dividers to the Navmenu

Add a link menu item with URL # and Link Text or Title Attribute of divider.

Adding Dropdown Headers

Adding Dropdown Headers between nav items

Adding Dropdown Headers between nav items

Add a new link with URL of # and a Title Attribute of dropdown-header.

Adding Disabled Links

Adding Dividers between nav items

Adding Dividers between nav items

To any element, set the Title Attribute to disabled.

For a demo, check the Nav Menu of this site.

Swashata has written 249 articles

Hi there, I am the Lead Developer at WPQuark.com. I love to create something beautiful for WordPress and here I write about how to use them. When I am not working, usually I am doing a number of other creative things ;).