wp nav menu

wp_nav_menuI continue fixing up the wp_nav_menu and the rest of my style.css code from my previous tutorial Creating a WordPress Theme.

I’ve received numerous requests to walk you all through the process of creating custom menus using WordPress 3.0′s wp_nav_menu. So, here I’ll describe everything you need to know. It is actually very easy to create a horizontal wp nav menu.

I’m going to ignore some of the options for the wp_nav_menu on purpose just so that you are not confused. If you want you can simply copy a paste the code below and everything will work in fact.

If you want to watch me create the php code needed to create the wp_nav_menu in a horizontal format check out Creating a WordPress Theme, and then watch the following video. Otherwise skip past the video to the code below.

Here is all of the code for the whole theme in a zipped archive sample theme

Code Used to Create a Horizontal wp_nav_menu

To use WordPress’s wp_nav_menu just paste the following code where ever you want it to show up in your theme.

<?php wp_nav_menu(array(
‘theme_location’ => ‘main-menu’,
‘menu_class’ => ‘dropdown’,
‘container_id’ => ‘navigation’,
‘fallback_cb’ => ‘wp_page_menu’
)); ?>

You must understand the following in the above code:

  • This will display an unordered list if you don’t style it ( That Code is Below )
  • The menu_class ‘dropdown’ name will be used to style the menu
  • The container_id ‘navigation’ is the name of the div that surrounds the menu
  • If the menu fails for some reason the function wp_page_menu will display a list of your pages by default

The CSS Code Used to Create a Horizontal wp_nav_menu

The following code is used to style your wp_nav_menu. You should put it in your style.css file or in a separate css file that is used just for your menu?

I’ll provide comments that explains what the code below does. If I don’t comment, that means I think you don’t need to worry about changing that CSS code.

/* The Div that surrounds the Drop Down Menu*/
#navigation {
float:left;
width:100%;
background: #A11C46; /* Background Color for your wp_nav_menu */
font: bold 14px/.5 Arial, sans-serif; /* Font used in the wp_nav_menu */
border-top:1px solid #FFFFFF; /* Border if you want one */
border-bottom:5px solid #FFFFFF;
}

/* Menu Bar List */
ul.dropdown {
list-style:none; /* Gets rid of bullets in the list */
float:left;
width:100%;
padding: 0 5px; /* Top and bottom padding of 0. Left and right of 5px */
}

ul.dropdown  li{
float:left;
position:relative;
}

ul.dropdown a { /* Menu link styling */
padding:12px;
color:#FFFFFF; /* Text color of links */
text-decoration:none; /* Gets rid of underline for links */
text-shadow:1px 1px 0 #000000; /* Puts a shadow under link 1px down, 1px to right, 0 blur & Black */
}

/* Styling when a link is hovered over */
ul.dropdown li:hover a {
background: #666; /* Background color for hovered link */
color: #FFFFFF; /* Text color of links */
text-shadow:1px 1px 0 #000000;
}

/* Displays Links as Blocks */
ul.dropdown li ul a {
display:block;
}

/* Styling for all of the Sub Menus  */

ul.dropdown ul {
list-style: none; /* Gets rid of bullets */
margin:0;
padding:0;
width:200px; /* Width of the Drop Down Box */
position:absolute; /* States that you are going to define exactly in pixels where the drop down appears */
}

ul.dropdown li ul {
top:24px; /* The Drop Down Box appears 24px below the menu when the menu is hovered over*/
}

ul.dropdown ul ul { /* Styling for secondary drop downs (Drop Downs of a Drop Down) */
top:0;
left:100%;
}

ul.dropdown ul li {
float:none;
}

/* Makes drop downs not appear by default unless the mouse hovers */
ul.dropdown ul,
ul.dropdown li:hover ul ul,
ul.dropdown ul li:hover ul ul
{ display: none; }

ul.dropdown li:hover ul,
ul.dropdown ul li:hover ul ,
ul.dropdown ul li ul li:hover ul
{ display: block;}

ul.dropdown li * a:hover { /* Styling for every link that is hovered over */
background: #A11C46;
color: #FFFFFF;
text-shadow:1px 1px 0 #000000;
}

Don’t Forget This

99% of the time people flip out when they put all of this code into their theme and then the menu doesn’t appear. That’s because you have to activate it in the WordPress Dashboard. You do that this way:

  • Login to your WordPress site
  • Click on Appearance in the left sidebar
  • Click on Menus in the left sidebar
  • Create your menu on the right side of the screen (I trust you can do this)
  • Under Theme Locations select the menu name in the drop down
  • Click Save

That’s it!!! Now your WordPress wp_nav_menu theme works!

Here is the rest of the code from the video being style.css and home.css. Leave questions and comments below.

STYLE.CSS

/*

Theme Name: New Think Tank Theme 1

Theme URI: http://www.newthinktank.com

Description: My first theme that was built by scratch

Author: Derek Banas

Author URI: http://www.newthinktank.com

Version: 1

*/

 

html {

background: #EEE1C2;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#EEE1C2′, endColorstr=’#FFFFFF’); /* for IE */

background-image: -webkit-gradient(linear, left top, left bottom, from(#EEE1C2), to(#FFFFFF)); /* for webkit browsers */

background-image: -moz-linear-gradient(top, #EEE1C2, #FFFFFF); /* for firefox 3.6+ */

}

 

body {

background-color: #EEE1C2;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#EEE1C2′, endColorstr=’#FFFFFF’); /* for IE */

background-image: -webkit-gradient(linear, left top, left bottom, from(#EEE1C2), to(#FFFFFF)); /* for webkit browsers */

background-image: -moz-linear-gradient(top, #EEE1C2, #FFFFFF); /* for firefox 3.6+ */

font: 14px/1.4 Georgia, serif;

}

 

 

#header, #footer, #firstSidebar, #secondSidebar {

display: block;

}

 

#pageWrapper {

width:1000px;

background-color: #FFFFFF;

margin-left: auto;

margin-right: auto;

}

 

/* All Header CSS Styling */

#header {

position: relative;

background-color: #A11C46;

height: 55px;

padding: 20px;

}

 

#blogTitle {

position: absolute;

left: 86px;

top: -15px;

color: #FFFFFF;

font: bold 40px/1.4 Georgia, serif;

text-shadow: #000000 2px 2px 1px;

}

 

#blogTitle a {

text-decoration: none;

color: #FFFFFF;

}

 

#blogSlogan {

position: absolute;

left: 86px;

top: 48px;

color: #FFFFFF;

font: bold 15px/1.4 Georgia, serif;

text-shadow: #000000 2px 2px 1px;

}

 

#searchBox {

position: absolute;

left: 675px;

top: 65px;

color: #FFFFFF;

font: bold 15px/1.4 Georgia, serif;

text-shadow: #000000 2px 2px 1px;

}

 

/* All Sidebar CSS Styling */

 

#firstSidebar a {

color: #A11C46;

text-decoration: none;

font: bold 11.5px/1.4 Arial, sans-serif;

}

 

#secondSidebar a {

color: #A11C46;

text-decoration: none;

font: 12px/1.4 Arial, sans-serif;

}

 

#firstSidebar {

font: 13px/1.4 Georgia, serif;

color: #666;

padding 5px;

padding-bottom: 15px;

padding-left: 10px;

border-left: 2px solid #A11C46;

background-color: #FFFFFF;

width: 175px;

text-align: left;

float: right;

margin-left: 5px;

margin-right: 5px;

margin-top: 5px;

list-style-type: none;

}

 

#secondSidebar {

font: 13px/1.4 Georgia, serif;

color: #666;

padding 5px;

padding-bottom: 15px;

padding-left: 10px;

border-left: 2px solid #A11C46;

background-color: #FFFFFF;

width: 175px;

text-align: left;

float: right;

margin-left: 5px;

margin-right: 5px;

margin-top: 5px;

list-style-type: none;

list-style-position: inside;

}

 

#firstSidebar h2 {

font: bold 15px/1.0 Arial, sans-serif;

color: #A11C46;

}

 

#secondSidebar h2 {

font: bold 15px/1.0 Arial, sans-serif;

color: #A11C46;

}

 

#firstSidebar ul li {

margin-left: -30px;

list-style-type: none;

}

 

#secondSidebar ul li {

margin-left: -30px;

list-style-type: none;

}

 

#footer {

background-color: #A11C46;

text-align: center;

color: #FFF;

padding: 20px;

}

 

#footer a{

text-align: center;

color: #FFF;

padding: 20px;

}

 

 

/* The Container for the Drop Down Menu*/

#navigation {

float:left;

width:100%;

background: #A11C46;

font: bold 14px/.5 Arial, sans-serif;

border-top:1px solid #FFFFFF;

border-bottom:5px solid #FFFFFF;

}

 

/* Menu Bar List */

ul.dropdown {

list-style:none;

float:left;

width:100%;

padding: 0 5px;

}

 

ul.dropdown li{

float:left;

position:relative;

}

 

ul.dropdown a {

padding:12px;

color:#FFFFFF;

text-decoration:none;

text-shadow:1px 1px 0 #000000;

}

 

/* Link Hovering Style */

ul.dropdown li:hover a {

background: #666;

color: #FFFFFF;

text-shadow:1px 1px 0 #000000;

}

 

/* Displays Links as Blocks */

ul.dropdown li ul a {

display:block;

}

 

/* The Sub Menus */

 

ul.dropdown ul {

list-style: none;

margin:0;

padding:0;

width:200px; /* Width of the Drop Down Box */

position:absolute;

}

 

ul.dropdown li ul {

top:24px; /* Drop the Drop Down Box 24px */

}

 

ul.dropdown ul ul {

top:0;

left:100%;

}

 

ul.dropdown ul li {

float:none;

}

 

ul.dropdown ul,

ul.dropdown li:hover ul ul,

ul.dropdown ul li:hover ul ul

{ display: none; }

 

ul.dropdown li:hover ul,

ul.dropdown ul li:hover ul ,

ul.dropdown ul li ul li:hover ul

{ display: block;}

 

ul.dropdown li * a:hover {

background: #A11C46;

color: #FFFFFF;

text-shadow:1px 1px 0 #000000;

}

HOME.CSS

#mainContent {
padding: 10px 5px 0px 15px;
background-color: #FFFFFF;
margin-right: 382px;
margin-top: 5px;
min-height: 1000px;
height: auto !important;
height: 1000px;
}

#introTitle {

background-color: #A11C46;
color: #FFFFFF;
padding: 18px 2px 2px 5px;
text-shadow: #000000 2px 2px 1px;

}

#introParagraph {

font-style: italic;

}

#postLists {
position: relative;
margin-left: 0px;
}

#postLists li{
position: relative;
margin-left : -40px;
}

.postTitle {
background-color: #A11C46;
color: #FFFFFF;
padding: 5px;
text-shadow: #000000 2px 2px 1px;

}

.postTitle a {
background-color: #A11C46;
color: #FFFFFF;
padding: 5px;
text-shadow: #000000 2px 2px 1px;
text-decoration: none;
}

.postImage {
position: absolute;
top: 50px;
left: 0px;

}

.postExcerpt {
position: relative;
padding: 0px 0px 0px 80px;
color: #666;
line-height: 1.5;
}

.postContent {
position: relative;
padding: 0px 0px 0px 80px;
color: #666;
line-height: 1.5;
}

62 Responses to “wp nav menu”

  1. Edson says:

    Hi. Please:
    How do I open an external link in wp_nav_menu?
    (personalized link).
    Tks.
    [edluso]
    Brazil

  2. Edson says:

    Thanks for the reply.
    I open the link in a new page or tab (_blank). I can only open the same page (_self).
    Any tips?
    Edson

    • admin says:

      That’s the way it works by default. I’m not sure if you can change that without editing the core files in wordpress? It’s better to not edit the core because the work you do will be overwritten when wordpress updates.

  3. Edson says:

    Thanks again.

    [[[Resolved]]]

    http://wordpress.org/support/topic/add-target-element-to-menu-editor

    “Only after lots and lots of snooping around did I find this one

    On /wp-admin/nav-menus.php , click on the link for Screen Options in the top right of your screen. Hidden away in the dropdown there, below the usual Show on screen checkboxes, is another line of Show advanced menu properties checkboxes.

    Just check the box for Link Target and then all your Menu Items will have the additional option of Link Target : “Same window or tab” or “New window or tab”"

  4. Thorsten says:

    Hey there,

    I´m searching for a way to insert an image into my menu. so left should be the logo (as a link to the homepage) followed by all my menu items…. i foudn some tips and tricks but they did´t word out for me. do you have a solution? it´s about a horizontal navigation in the header. thank you in advance for your reply!
    all the best

  5. Bobby says:

    Hi Sir Derek, how not to include the sub menu in footer menu? Just only the main menu display. Thanks.

  6. Lee says:

    Thanks for writing this tutorial. I pasted the code in the right places and edited the style for coloring. Sadly, I still cannot get this to work in my header.

    I’ve gotten the menu to show up as an unordered list vertically in black text (absolutely no styling). Tried pasting the code into the footer, same result although this time it was centered. Any help you can provide would be great.

    Thanks in advance. Especially for providing the stylesheet info.

    • admin says:

      You have to activate the menu inside of wordpress. Just click on Menu under Appearance in your WordPress Dashboard. Create a menu and click save. Everything should work then

  7. Kathleen Dema says:

    Great tutorials, do you have custom page tutorial Derek? Can you give me the links. Thanks.

  8. Stephanie says:

    Hi Derek,
    Thanks so much for your tutorials and help. This web site totally rocks!! I have made a new wordpress site totally from scratch which is AWESOME! I need some help with my menu settings. How do I fix the menu settings for dropdown items that span more than one line. For instance, under the menu option “Events”, I have something titled “Designing Your Bedroom For Your Attitude”. The “Your Attitude” is on a second line and the words run into the line above it. So the lines are overlapping and you can not read them. Do you know what I mean? and can you help me?
    Thanks,
    Stephanie

    • admin says:

      I’m glad you like the tutorials. Thanks for showing your appreciation. To increase the width just change the width for ul.dropdown ul in style.css. It’s at line 116. That’s it. I hope that helps

      • Stephanie says:

        Hey Derek,
        I found that place in the CSS code but I don’t really want to make the dropdown bar super long (like 400px). It’s already 300px which is pretty big. Is there a way that I can let it span over 2 lines but have the text appear as readable instead of overlapping?
        Thanks,
        Stephanie

  9. Stephanie says:

    Hi Derek,
    Thanks for checking. It’s no big deal if I have to shorten the name. Just thought I would ask :)

    Thanks again!
    Stephanie

  10. Guy says:

    Hi Derek,

    Great tutorial! I’m trying to get a horizontal submenu spanning across dropped down from one of my menu items. I have set up the submenu on the wordpress menus screen but can only get vertical.

    I have also changed the code a little to make my menu items a set height and width with the text placed centrally within blocks of colour.

    Any help would be greatly appreciated.

    Thanks

    • admin says:

      Did you download all of the code needed including the CSS? All of the code is available in a zipped archive here newthinktank.com/wordpress/New-Think-Tank-Theme.zip

      That should solve your problems because everything has been triple checked to work. I hope that helps

      • Guy says:

        It works perfectly (i think), my menu has spanned horizontally with vertical submenus appearing below the main menu, but is there a way to have the submenu expand horizontally?

        • admin says:

          Anything is possible. How you would create it is based on if you always want the submenus to be displayed horizontally? It is all a matter of positioning with css. If you wanted them to sometimes be horizontal and other times vertical you’d have to program that difference in.

          All menus in WordPress are unordered lists. This new tutorial might help you better understand it WordPress Vertical Menus

          • Guy says:

            For this particular site i am designing I would always like the sub menu to display horizontally. With each list item set next to the other. Do you know where in the above code I would specify this??

            • admin says:

              This is the default output from a wordpress menu system. You are going to have to target #navigation ul li ul li or .sub-menu li and have everything display inline instead of block. Then everything will line up horizontally. You could also just copy the styling for the top horizontal menu and use it for the sub menus. It’s going to require a lot of tinkering with the heights and widths. I’d do it but I’m very busy at the time

              div id=”navigation” class=”menu-menu-container”

              ul id=”menu-menu” class=”dropdown”

              li id=”menu-item-720″ class=”menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-720″>

              a href=”http://website.com/” >Home /a

              /li

              li id=”menu-item-734″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-734″

              a href=”http://socialvoicemarketing.com/productsservices-2/” >Products/Services /a

              ul class=”sub-menu”

              li id=”menu-item-740″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-740″
              a href=”http://website.com/productsservices-2/stuff/”
              Social Media Audit /a

              /li

  11. Stephanie says:

    Hey Derek,
    I’m back with another menu question. This code works perfectly for my header menu. Now I would like to set up another menu and apply it to my footer area. Let’s say I call it Bottom Menu. How would I set that up?

    Thanks,
    Stephanie

    • admin says:

      The same as before. You just need to create a new menu under appearance in the WordPress Dashboard. Pull the new menu information using the name you assigned to the new menu

  12. Deb says:

    Hi Derek,
    I am new to wordpress and am having trouble getting a drop down menu to work using CSS. I have copied all your code from your STYLE.CSS in to mine and included the following code in my header.php file:

    ‘main-menu’,
    ‘menu_class’ => ‘dropdown’,
    ‘container_id’ => ‘navigation’,
    ‘fallback_cb’ => ‘wp_page_menu’
    ));

    ?>

    I have created a menu named main-menu. When my page displays it picks up your burgundy background colour but the menu is still displaying in typlical word press fashion with no formatting and the pages listed one under the other with dot points. What do you think I have missed?

    THANKS

  13. Deb says:

    Thanks for the link to the cross browser code. I have tried it and it is still not working. I did a comparison between the code on your index page and one of mine and there are difference in the first 3 lines of the html menu code:

    My code is:

    where as your index page is:

    It must be something very simple that I am missing – mainly because I don’t know what I am doing :-)

    Thanks.

  14. Andrzej says:

    Hi,
    nice tutorial:)

    I’ve one question – how to make to display submenu in horizontal position?

    I read many sites, tutorial, tried using scripts and still doesn’t work:/

    thanks for help in advance

  15. Michael Catanzaro says:

    I am trying your horizontal code and in most respects it works but as I hover them try to click on a sub menu the sub item disappears before I can click on it. Why do the sub items disappear when I start to move my mouse in their direction?

  16. Curt says:

    Thank you the tutorial. I don’t know much about CSS, so I was hoping for a copy and paste type solution. I bought a theme, and I’m trying to tweak it. The menu that came with the theme shows all of the pages, regardless of whether it is a subpage.

    I copied in your code, and it is pulling the correct text, but only just showing it as text (see chaterschoolcorp.org). Is there something I’m missing?

    I’m not sure if it has anything to do with when I go to Appearance->menus as you sugggested, when I create the new menu it states “The current theme does not natiely support menus, but you can use the “Custome Meny” widget to add any menus you create here to the theme’s sidebar.”

    Thanks in advance for any thoughts you may have.

    • admin says:

      That theme seems to be blocking you from creating edits. That stinks! I’m sure you can go in and disable them from blocking you, but I’m not sure how.

      That theme company doesn’t have the best reputation and I found an article that says they don’t support WordPress 3.0 menus among other things. Here is the article on how to fix the menu Fix Templatesold problem

  17. CG says:

    Hi Derek,

    Another great tutorial as always. I Have a question regarding the hover function. Is it possible to have the hover menue show only when clocked upon? I’ve tried to change li:hover to li:active but with no success.

    I think this would be great since a lot of people uses IPads and IPhones now days.

    Keep up the great work!

    /C

  18. F.Perry says:

    Thank you! :-)

  19. Eric says:

    My project is looking good. Thanks.
    Now I’m trying to center the menu. I’ve tried ‘margin-left:auto;margin-right:auto at several levels (#navigation, ul.dropdown, ul.dropdown li) and haven’t had any luck. Any suggestions?

    Thanks.
    Eric

  20. Dan says:

    Hey Derek,

    First thanks for your tutorials on WordPress – they are definitely the best out there! Now, here’s my issue – when using your CSS etc for the Drop Down menus on a WP 3.5 site I’m putting together, I just couldn’t get the menus that I’d created in the WP admin to take on ANY of the CSS. I’d put your php menu array snippet in my header and added the get_menu thingy in the functions.php. I’d thrashed the variable names until I was blue in the face, but every time I looked at the source that WP was generating, all the list items were classed as ‘menu’, not ‘dropdown’ so I had to change the CSS to reflect this and bingo, it all works. Any ideas why this might’ve happened? I was using the HTML5-Reset blank theme to build from.

    • admin says:

      Thank you :) At the time I made the WP tutorials, I had the only free theme develop tutorials anywhere. They were fun to make. I’ll have to look into what you mentioned. It is totally possible that the WP framework changed, but I haven’t had any sites crash? I’ll take a closer look. Thank you very much for bring that up and for adding a fix :D

      • Dan says:

        I found the problem! In copying and pasting your code to the header.php, the straight apostrophes around the arguments got turned into curly ones. Only took me 3 days to spot that in which time I’ve pretty much messed up my menu css :-( Oh well, all part of life’s rich tapestry I guess…

  21. Steve W. says:

    I posted php snippet in my header as suggested, corrected the curly braces with straight ones. Added some css and realised it wasn’t working so I looked at the source code for the page and there was no container surrounding it called navigation. It’s surrounded with a div called ‘dropdown’ though. I deleted the line “‘container_id’ => ‘navigation’,” and saved and reloaded and sure enough the same result so that line doesn’t seem to be creating a container called navigation. This is no problem because I can do this manually without using wordpress but I thought I would tell you of my woes xD By the way what container should I wrap it in? a div or perhaps a nav container, what am I saying I will just do what I always do and mess around. Thanks for the tutorial though.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Google+