How to add a drop down menu in Word Press for your site?

Adding a drop down menu in header portion of wordpress:


  • 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.
<ul id="nav">
        <?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.


Comments

  1. Hi,

    I 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.

    ReplyDelete
  2. HI

    Great 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

    ReplyDelete
  3. 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.

    ReplyDelete
  4. Nice to see a WordPress tutorial in a Blogger Blog :)

    ReplyDelete
  5. I 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?

    http://lastshredsofsanity.com/ThisIsATest/

    ReplyDelete
  6. I've used your menu a few times & its worked beautifully... THANK YOU!
    In 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 :)

    ReplyDelete
  7. When I added this didn't modify anything, at all?
    I am using Magazine Basic Theme

    ReplyDelete
  8. I just added this. Thank you for the CSS tip! Works like a charm in all browsers.

    ReplyDelete
  9. How 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.

    Thanks!

    ReplyDelete
  10. it is great and very simple
    mtrying to create drop down menu for three days and now finaly i did it...:)

    ReplyDelete
  11. http://www.diversityreporter.com/new_site/

    i have this site..but drop menu not working..plz helpppppppp

    ReplyDelete
  12. 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?

    ReplyDelete
  13. hi thanks for this post.

    btw, here is my site

    http://yazzodeleon.com/tutorials/how-to-install-wordpress-on-your-website/

    ReplyDelete
  14. 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...

    ReplyDelete
  15. I 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..

    ReplyDelete
  16. i have sloved that problem..thanks a lot

    ReplyDelete
  17. Can i use the same code to show the list of categories and sub-categories instead of pages?

    ReplyDelete
  18. thanks for the menu.its working but dropdown goes behind the pages

    ReplyDelete
  19. The menu is working! You're great! <3

    ReplyDelete
  20. Thanks !!
    Its working superb and easy to modify as well
    You Great !!!

    ReplyDelete
  21. 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?

    ReplyDelete
  22. I 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.

    ReplyDelete
    Replies
    1. you can use a different function wp_nav_menu()

      Delete
  23. I have created a new tutorial for including Pages, Categories and Sub Categories in WordPress theme.

    https://wordpress-tuts.blogspot.com/2016/09/how-to-fetch-pages-categories.html

    ReplyDelete

Post a Comment

Popular posts from this blog

websites that provides free premium wordpress themes

How to fetch pages, categories, subcategories in WordPress menu