WordPress 3 brought many great features. One of those great features is navigation menu support. Although many themes not supporting this great feature yet, you can use it with dropdown menu widget to create custom menus on your site. In this tutorial i will explain you how to use custom navigation menus with dropdown menu widget.
First make sure you have latest wordpress installation. Custom Navigation Menu support comes with WordPress 3. So if your wordpress version is lower than that, you need to update first. Don’t worry, it will worth it ;)
If you have the latest wordpress installation now, you will see Menus link under Appearance section of the admin panel.
Click on Menus to start building our brand new custom menu. WordPress may warn you about “theme doesn’t support custom menus” but don’t worry. We will be using menu in our dropdown widget so it doesn’t matter.
You see white box there under + sign. Enter a name for our new menu. For example, let’s call it, “My Custom Dropdown”. How original! Click on create menu button afterwards to create the menu.
Your menu is created now but it doesn’t have any link inside. You will see tools on the left to add links to your custom menu. You can add blog pages & categories to your menu.
You can also add custom links to your menu. After you add links, you can easily order your menu items using drag and drop.
You can create sub menus dragging a link item under another.
After your ordering is complete, save your menu. This menu is now added to dropdown menu widget. Steps from now on requires dropdown menu widget installed on your site. If you haven’t already click here to get it.
Add a dropdown menu widget to your widget area. Note that not all the themes have header widget areas. I like my custom themes to have it. Makes wordpress more customizable.
Select your custom menu from the Menu selection of dropdown menu widget. And click on Save.
If you just installed the dropdown menu widget you may need to visit menu style page. Change dropdown menu theme to any theme you like and then click on Save Changes.
Now visit your blog and enjoy your new custom menu. Cheers!
Ah thanks Shailan, I never realised that. I can now choose nav style but although i have created 2 sub pages with respective parents i still cannot get the dropdown to work as all the pages appear on the top nav. i have created two navs – about and contact – both supposed to have dropdowns but as you can see they don’t – http://www.martintimbers.co.uk/wordpress
When you use WordPress Custom Menu’s wordpress doesn’t add sub pages to list automatically. You need to add sub pages to list and drag them under their parents to make the dropdown. If you check the code you will see there is no list item under current pages.
Hi Shailan,
I have solved the problem of the dropdowns not working. Under template tags / Menu items, I should have selected ‘pages’ rather that the name of my menu. It now works!
I am new to wordpress and trying to work on an existing site with too many items in menu bar. Downloaded the dropdown menu widget and followed tutorial, but cannot “drag” or “drop” any pages, so cannot create dropdown submenus. Where am I going wrong?
Hi Sahilan, is there any way to use different style for two or more menus created? I want to set a different style for two menus, i´ve tried everything but my knows are not enough, can you help me please? Thanks!
Dropdown Menu Themes are class based CSS. So, every menu you add to your site will have same theme. With current configuration you can’t select custom theme for your second menu but you can use CSS to customize your second menu. Every menu created has a unique id. Hope that helps.
Ok, thanks a lot! I’ll try it! Bye!!
This really saving my time as i am seriously searching for a way to impliment this Great article
hmm. but some themes do not allow any theme location then whats is the method?? i think the best method is to in the pages , then adding them in the parent it must show in dropdown
You can use template tag in your
header.phpfile. This is the most general use.hi, i added two menu, it seems like id for both is 1 – so i couldnt style them differently.
Hello fadzli, for template tag usage you are right. They will have same id. You can however solve it by wrapping code with some div like:
Then you can customize your items using:
#main-menu-wrap ul.dropdown li{ background-color: pink; }I will enumarate template tag usage with the next release.
nice. looks good.
my friend make do with available element and come with this, which work as well. cheers! thanks!
#navr .dropdown-horizontal-container, #navr ul.dropdown li {
background-color: #673694 ;
}