How to add a drop down menu in Word Press for your site?
Adding a drop down menu in header portion of wordpress:
<?php wp_list_pages('title_li=&depth=0&sort_column=menu_order&exclude=56'); ?>
</ul>
This above line of code lists all the pages present in the database.
• Depth=0 will display all the subpages without any restriction.
• Sort_column=menu_order will sort according the menu id
• Exclude will exclude the page with id 56 from being displayed in the navigation.
Now open the style.css present in the same theme folder of word press.
Add the following css code in it.
/*navigation menu */
#nav {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background-color:#60625C;
bottom:0;
left:0;
margin:0;
padding:0;
width:100%;
position:absolute;
z-index:1;
}
#nav, #nav ul {
line-height:40px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:100%;
}
#nav a, #nav a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}
#nav li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
border-right:1px solid #6E7073;
}
#nav a, #nav a:visited {
color:#FFFFFF;
display:block;
padding:0 20px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
text-decoration:none;
}
#nav li ul {
border-bottom:1px solid #6E7073;
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}
#nav li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21 none repeat scroll 0 0;
border-left:1px solid #6E7073;
border-right:1px solid #6E7073;
border-top:1px solid #6E7073;
width:220px;
}
#nav li li a, #nav li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21 none repeat scroll 0 0;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}
#nav li li a:hover, #nav li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}
/*navigation menu */
Get a good drop down navigation menu in word press using CSS.
- First install word press.
- You can find the latest version of word press at the url http://wordpress.org/
- Now install it.
- To add a header in your word press please follow the following steps mentioned below:
- In word press you can locate the theme folder (where your site theme is present) in wp-content -> themes -> locate your folder. For now we will try to customize the default theme of word press.
- Now locate the file header.php and open it in using editing software like Dreamweaver.
- Add the following two lines of code just below the headerimg div.
<?php wp_list_pages('title_li=&depth=0&sort_column=menu_order&exclude=56'); ?>
</ul>
This above line of code lists all the pages present in the database.
• Depth=0 will display all the subpages without any restriction.
• Sort_column=menu_order will sort according the menu id
• Exclude will exclude the page with id 56 from being displayed in the navigation.
Now open the style.css present in the same theme folder of word press.
Add the following css code in it.
/*navigation menu */
#nav {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background-color:#60625C;
bottom:0;
left:0;
margin:0;
padding:0;
width:100%;
position:absolute;
z-index:1;
}
#nav, #nav ul {
line-height:40px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:100%;
}
#nav a, #nav a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}
#nav li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
border-right:1px solid #6E7073;
}
#nav a, #nav a:visited {
color:#FFFFFF;
display:block;
padding:0 20px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
text-decoration:none;
}
#nav li ul {
border-bottom:1px solid #6E7073;
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}
#nav li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21 none repeat scroll 0 0;
border-left:1px solid #6E7073;
border-right:1px solid #6E7073;
border-top:1px solid #6E7073;
width:220px;
}
#nav li li a, #nav li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21 none repeat scroll 0 0;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}
#nav li li a:hover, #nav li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}
/*navigation menu */
Get a good drop down navigation menu in word press using CSS.
Hi,
ReplyDeleteI am new to WP and trying to learn my way around before merging my blog from blogger. I found your suggestion to add a drop-down menu without a plugin from the WP forum (exactly what I've been looking for!). I'm not sure where to add either one of these codes within the header.php and the style.css exactly- any help would be appreciated.
HI
ReplyDeleteGreat example - thanks for sharing - I'm new to CSS so not sure what is going wrong - I've implemented the example but the menus won't drop down in IE6 - any ideas?
Martin
Great write-up. It worked like a charm. How would we add a 3rd level? I assumed that I can just "nav li ul ul" but that messed up all my drop-downs.
ReplyDeleteNice to see a WordPress tutorial in a Blogger Blog :)
ReplyDeleteI did this and it put the nav bar all the way over to the left side of the page and NOT under the header. It's in the middle of the page. I'm stuck. Please help?
ReplyDeletehttp://lastshredsofsanity.com/ThisIsATest/
I've used your menu a few times & its worked beautifully... THANK YOU!
ReplyDeleteIn case anybody else comes across this problem: I had an IE issue with one of my sites & realised that I'd floated my nav to the right: it made the nav items list backwards & made the drop-down un-align way to the right of the parent. I simply narrowed my div in which my nav was lying, floated things to the left again & everything is working perfectly again :)
When I added this didn't modify anything, at all?
ReplyDeleteI am using Magazine Basic Theme
I just added this. Thank you for the CSS tip! Works like a charm in all browsers.
ReplyDeleteHow would I go about getting the right border off the last tab? I am not wanting the last tab to have that right side border to close it in.
ReplyDeleteThanks!
it is great and very simple
ReplyDeletemtrying to create drop down menu for three days and now finaly i did it...:)
http://www.diversityreporter.com/new_site/
ReplyDeletei have this site..but drop menu not working..plz helpppppppp
Thank you! This menu was very easy to install and customize. It works great in every browser except Internet explorer (7 & 8). Do you have a fix for this by chance?
ReplyDeletehi thanks for this post.
ReplyDeletebtw, here is my site
http://yazzodeleon.com/tutorials/how-to-install-wordpress-on-your-website/
I used 'wp_list_pages' instead of 'wp_nav_menu' as I didn't get the style of ul with 'items_wrap' parameter. Now its working well. Thanks a lot...
ReplyDeleteI have used many plugin,this menu is good.but i have a problem on hover the menu appear but disappears before clicking on link.help me to sort of..
ReplyDeletei have sloved that problem..thanks a lot
ReplyDeleteCan i use the same code to show the list of categories and sub-categories instead of pages?
ReplyDeletethanks for the menu.its working but dropdown goes behind the pages
ReplyDeleteThe menu is working! You're great! <3
ReplyDeleteThanks !!
ReplyDeleteIts working superb and easy to modify as well
You Great !!!
is this any theme???
ReplyDeleteGreat example - thanks for sharing.
ReplyDeletewebsite development in Islamabad
This is a fantastic article thank you. Quick question. How would I alter the code to only show the pages that I have listed in a custom menu? I have a menu each side of the logo and only want to show the items on the left?
ReplyDeleteI have done this. It works. But It fetches all the pages in the database. I want to fetch the pages in the menus only. What will be the code then to make the dropdown.
ReplyDeleteyou can use a different function wp_nav_menu()
DeleteI have created a new tutorial for including Pages, Categories and Sub Categories in WordPress theme.
ReplyDeletehttps://wordpress-tuts.blogspot.com/2016/09/how-to-fetch-pages-categories.html
Hey, thanks can you please look that same problem in my site as well. Thank you so much for your time.
ReplyDeletehttps://yourkoseli.com