wp_nav_menu – Horizontal drop down menu

I used a call like this:
wp_nav_menu( array( 'container_class' => 'main-navigation', 'theme_location' => 'primary' ) );

And then CSS like this:
[CSS moderated as per the Forum Rules. Please use the pastebin]

Remember, this will likely vary greatly based on your site, but it should be a good starting point.

Hi Aaron,

I think this may be also the answer I’ve been looking for. i.e. I want the drop-down menu from the primary navigation to go across the screen rather than down so that the drop-down menu does not obscure the site content.

Would you be able to explain further as to where this code needs to go? I’m using pagelines pro and there seem to be alot of different css files relating to navigation… Also what do you mean by referencing the code?

Many thanks!!!

If there are multiple stylesheets related to navigation, the safest place to put it is in the one that loads last, so that it won’t be overwritten. You could even put it in its own stylesheet and insert that sheet into the header of your theme.

Thanks, I think I’ve managed to find where to put the code now. It’s still not working though…

This is what my code looks like…

/* @ Main Nav */

.main_nav {
line-height: 1.1em;
text-align: left;
margin: auto;
z-index:28; /* Fancybox Uses 30 */
position: relative;
width: 952px;

}

.main_nav .content-pad{
padding-top: 0px;
background color: #000;
}
.main_nav ul{
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
}
.main_nav li{display: block; float: left; position: absolute;}
.main_nav ul li{
margin-left: 0px;
padding: 0px;
display: block;
float: left;
text-align: left;
vertical-align: baseline;
}
.main_nav li a{
background:#e3e4e5;
padding: 10px 15px 10px;
text-decoration: none;
display: none;
float: left;
border: 1.5px solid white;
border-bottom:none;

}

.main-nav li a{
font-size: .85em;
}

/*IE6 border color (transparent border fix)*/
*html .main_nav li a{ border-color: white; }

/* Drop Down */
.main_nav ul ul {
background-color:#000;
display:none;
left:0;
padding:0;
top:30px;
width:10em;
}
.main_nav ul ul li {
display: block;
float: left;
}

#primary-nav ul.main-nav {
width:952px;
}
ul.sf-menu, .sf-menu * {
margin-left: 0px;
padding: 0;
list-style: none;
background-color: #e3e4e5;
}

ul.sf-menu ul.sub-menu, ul.sf-menu ul.children {
display:block;
float:left;
margin-top:0;
padding: 0px;
text-align:left;
width:10em;
}
ul.sf-menu, .sf-menu * {
background-color:#e3e4e5
}
.main-nav li a:hover,
background-color:#60615f
}
.main-nav li.current_page_item a
background-color:#a2a1a1
}

.sf-menu { line-height: 1.0; }
ul.sf-menu ul.sub-menu, ul.sf-menu ul.children {
display: block;
float: left;
width: 10em; /* left offset of submenus need to match (see below) */
margin-top: 0;
padding: 0;
text-align: left;
}

ul.sf-menu li:hover { visibility: inherit; /* fixes IE7 ‘sticky bug’ */ }
ul.sf-menu li {
display: block;
float: left;
margin: 0;
}

ul.sf-menu li a{ padding: 10px 15px 10px; display: block; float: left;}
ul.sf-menu ul li a{ width: 120px; padding: 10px 15px 10px; display: inline; float: left; }
.sf-menu a {
display: block;
float: left;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
width: 120px;
top: 34px; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}

Thanks!

this might help you out https://www.newthinktank.com/2011/04/wp_nav_menu/

This is what I used to produce a HORIZONTAL wp_nav_menu. (no drop downs though – see my earlier link for drop downs)

Make sure this is in your functions.php

if (function_exists('register_nav_menus')) {
   	register_nav_menus(
		array(
			'main_nav' => 'Main Navigation Menu'
			)
		);
	}

place the wp_nav_menu where you want to in your code
<div id="information"><?php wp_nav_menu(array('menu' => 'Main Nav Menu', 'container' => false, 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>')); ?></div>

Add CSS
https://pastebin.com/SdpvYABV

One point to add: My menu in the wp admin area was called Main Nav Menu.
NOTE: <?php wp_nav_menu(array('menu' => 'Main Nav Menu',

or you could just use css to style it instead of getting rid of the ul
code applies to previous comments
https://pastebin.com/kJ4hEknY
/*use this along with the standard wp_nav_menu to display a horizontal menu but up against the right hand side of the screen – change / remove the float: right; under the information ul (in line 3) to sit the menu left*/

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

It’s a very basic article which may or may not be helpful, but I recently wrote a basic tutorial on configuring custom appearance menus in a WordPress theme. It may help solidify your understanding on the issue.

Ryan Burnette [signature moderated]

@edluso

To answer your specific question. When editing your menus, go up to Screen Options at the top of the page and make sure Link Relationship (XFN) is checked off. Then for the specific link you want to open in a new window, set the relationship to external.

A bit of Javascript must be included in your theme for this to work. You can take a look at this article about the best way to make links open in a new window to get the code.

TechStudio.
Thank you very much.
A hug from Brazil.
[edluso]