How to centralise submenu drop downs?

victoriaeighty5 · 05-11-2012, 01:31 PM

Hi - I'm new here and new to html/css. I've been doing a few minor modifications to my wordpress site but I'm having trouble with this:

How do I get the drop down submenus from my horizontal top menu to centralise? i.e the child drop down should center under it's parent.

Here's a photoshopped image of how I'd like it to behave:

And here's a link to the site in question, you can see the the submenus are all off to the right.
http://victoriaeightyfive.com

I'd be really grateful if anyone could help. This has been driving me nuts.
Thanks
Victoria.

Here's my current code for this:

Code:

/***** Secondary Nav Menu ********************/

#secondary-nav {
	margin: 10px 30px 30px 30px;
	overflow: hidden;
	clear: both;
	font-family: "Helvetica Neue", 'Kreon', serif;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}

#secondary-nav ul {
	width: 100%;
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0 0 0 0px;
	
}

#secondary-nav ul ul {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0);
    margin:  0;
    padding: 0;
}
	
#secondary-nav li {
	display: inline-block;
	list-style: none outside none;
   	text-align: center;

}
	
#secondary-nav li a {
	color: #333333;
	font-size: 17px;
    font-weight: 300;
    margin: 0;
	padding: 8px 20px 10px 20px;
	text-decoration: none;
	display: inline-block;
	position: center;
}

#secondary-nav li a:hover, #secondary-nav li a:active {
	color: #FF41D7;
}

#secondary-nav li a .sf-sub-indicator {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	position: relative;
}
	
#secondary-nav li li a, #secondary-nav li li a:link, #secondary-nav li li a:visited {
	color: #888888;
	width: 100px; 
	font-size: 14px;
	margin: 0;
	padding: 5px 20px 5px 20px;
	border-bottom: 1px solid #efefef;
	text-transform: none;
	position: center;
	
}
	
#secondary-nav li li a:hover, #secondary-nav li li a:active {
	background: transparent;
	color: #FF41D7;
}
	
#secondary-nav li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 160px;
	margin: 0 0 0 0px;
	padding: 0 0 0 0px;
}

#secondary-nav li ul a { 
	width: 170px;
}
	
#secondary-nav li ul ul {
	margin: 0px 0 0 0px;
}

#secondary-nav li:hover ul ul, #secondary-nav li:hover ul ul ul, #secondary-nav li.sfHover ul ul, #secondary-nav li.sfHover ul ul ul {
	left: -999em;
}

#secondary-nav li:hover ul, #secondary-nav li li:hover ul, #secondary-nav li li li:hover ul, #secondary-nav li.sfHover ul, #secondary-nav li li.sfHover ul, #secondary-nav li li li.sfHover ul {
	left: auto;
}

#secondary-nav li:hover, #secondary-nav li.sfHover { 
	position: center;
}

SB65 · 05-11-2012, 02:52 PM

I don't think this is trivial, unfortunately. Your top level menu has items of varying widths, and the drop down menu, which does have a fixed width is set so on :hover it appears aligned with the left hand edge of the top level item, with the result that it is "off-centre". What you really want is for the drop down to be aligned slightly to the left of its normal position.

So you really need a little negative left margin of the right amount applied to each drop down...

A javascript solution is possible. Pseudo logic would be something like:

- for each ul drop down element
--read the width of the element's parent li
--subtract the parent width from the drop down width
--set a negative left margin of half the result

Or, another somewhat clunky alternative is to specifically set the margin-left for each drop down to shift it a little to the left. Something like (for the categories page):

Code:

#secondary-nav li#menu-item-48:hover ul{
     margin-left:-25px;
}

and then repeat amended as necessary for each.

Both of these end up with the same result in slightly different ways.

Another option I suppose is to give your top level menu items a fixed width, then you always know exactly where the dropdown should be - so if your top level item is 120px, and the drop down is 160px, then the drop down needs to have a left-margin of -20px and it'll be centred.

victoriaeighty5 · 05-11-2012, 03:41 PM

Sorry if it was such an obvious/trivial question. But as I said, I'm very much a learner when it comes to code.

But THANK YOU! Thank you a million times! It worked!!!
You have no idea how much it was bothering me and how many hours I've spent messing with it and reading around the internet for a solution.

I went with assigning each menu item it's own margin.
I know I'll have to adjust it should I change the menu/update it in the future but I'm ok with that for now.

It looks great and I'm SO PLEASED.

Thanks again for taking the time to help me. It's greatly greatly appreciated!

Excavator · 05-11-2012, 05:56 PM

Hello victoriaeighty5,
I think your menu is a bit more complicated than it needs to be. Have a look at this and see if you come up with any ideas -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 30px auto;	
	padding: 200px 0 300px;
	background: #fff;
	box-shadow: 0 0 20px #8493A6;
	overflow: auto;
}
#secondary-nav {
	height: 42px;
    margin: 10px 30px 30px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    clear: both;
    font-family: "Helvetica Neue",'Kreon',serif;
}
ul#nav {
	line-height: 40px;
	margin: 0;
	padding: 0;
	text-align:center;
}
	ul#nav li {
		display: inline-block;
		margin: 0;
		padding: 0;
		position: relative;
		list-style: none;
		background: #fff;
	}
		ul#nav li a {
			margin: 0;
			padding: 1px 20px;
			display: block;
			font-size: 17px;
			font-weight: 300;
			color: #333;
			text-decoration: none;
		}
		ul#nav li:hover {background: #fff;}
			ul#nav ul {
				width: 160px;
				margin: 0;
				padding: 0;
				top: 42px;
				left: -999px;
				position: absolute;
				border: 1px solid #ccc;
    			border-radius: 3px 3px 3px 3px;
    			box-shadow: 0 0 0 transparent;
			}
				ul#nav li:hover ul {
					margin: 0 0 0 -80px;
					left: 50%;
			}
</style>
</head>
<body>
    <div id="container">
        <div id="secondary-nav">
            <ul id="nav">
                <li><a href="http://victoriaeightyfive.com">Home</a>
                    <ul>
                        <li><a href="http://victoriaeightyfive.com/new-page/">New page</a></li>
                    </ul>
                </li>
                <li><a href="#">Categories</a>
                    <ul>
                        <li><a href="http://victoriaeightyfive.com/category/reviews/">Reviews</a></li>
                        <li><a href="http://victoriaeightyfive.com/category/reviews/">Reviews</a></li>
                        <li><a href="http://victoriaeightyfive.com/category/reviews/">Reviews</a></li>
                        <li><a href="http://victoriaeightyfive.com/category/reviews/">Reviews</a></li>
                    </ul>
                </li>
                <li><a href="http://victoriaeightyfive.com/blogroll/">Blogroll</a>
                    <ul>
                        <li><a href="http://victoriaeightyfive.com/new-page/">New page</a></li>
                    </ul>
                </li>
                <li><a href="http://victoriaeightyfive.com/about/">About</a>
                    <ul>
                        <li><a href="http://victoriaeightyfive.com/disclaimer/">Disclaimer</a></li>
                    </ul>
                </li>
                <li><a href="http://victoriaeightyfive.com/contact/">Contact</a>
                    <ul>
                        <li><a href="http://victoriaeightyfive.com/new-page/">New page</a></li>
                    </ul>
                </li>
            </ul>	
        <!--end secondary-nav--></div>
    <!--end container--></div>
</body>
</html>

That is based on this simple CSS drop down.
Notice how, instead of giving each dropped li a different negative positioning, the dropped ul is centered relative to the parent li the way we've always centered ap elements.

victoriaeighty5 · 05-11-2012, 08:29 PM

Thanks Excavator.
I didn't write the code from scratch it came as you see from the theme I selected in word press.

I have replaced my code with the one you have offered and it worked, however when I've amended the menu it seems to have broke.

I'm all for using your much simpler code. But I mustn't have adjusted it right when I've added the new menu items.

Can you please advise? Thanks so much.
Victoria.

Excavator · 05-11-2012, 08:45 PM

Quote:

Originally Posted by victoriaeighty5

But I mustn't have adjusted it right when I've added the new menu items.

Can you please advise? Thanks so much.
Victoria.

I reloaded a few times to make sure I wasn't looking at a cached version but what I'm seeing on this end is the new CSS I wrote in your style.css but your original unchanged markup. You will need to rewrite your markup as well before this can work, the new CSS was not a direct replacement.

victoriaeighty5 · 05-11-2012, 08:50 PM

Oh, I'm sorry. I don't know which bit you're referring to when you say 'markup'. I really am totally new at this...

victoriaeighty5 · 05-11-2012, 09:01 PM

Should it go in the header.php file?

"</style>
</head>
<body>
<div id="container">
<div id="secondary-nav">
<ul id="nav">".... etc?

Excavator · 05-11-2012, 09:41 PM

Quote:

Originally Posted by victoriaeighty5

Oh, I'm sorry. I don't know which bit you're referring to when you say 'markup'. I really am totally new at this...

Markup is the html, sorry for not clarifying.
This is the markup in the new snippet I posted of your menu -

Code:

    <div id="container">
        <div id="secondary-nav">
            <ul id="nav">
                <li><a href="http://victoriaeightyfive.com">Home</a>
                    <ul>
                        <li><a href="http://victoriaeightyfive.com/new-page/">New page</a></li>
                    </ul>
                </li>
                <li><a href="#">Categories</a>
                    <ul>
                        <li><a href="http://victoriaeightyfive.com/category/reviews/">Reviews</a></li>
                        <li><a href="http://victoriaeightyfive.com/category/reviews/">Reviews</a></li>
                        <li><a href="http://victoriaeightyfive.com/category/reviews/">Reviews</a></li>
                        <li><a href="http://victoriaeightyfive.com/category/reviews/">Reviews</a></li>
                    </ul>
                </li>
                <li><a href="http://victoriaeightyfive.com/blogroll/">Blogroll</a>
                    <ul>
                        <li><a href="http://victoriaeightyfive.com/new-page/">New page</a></li>
                    </ul>
                </li>
                <li><a href="http://victoriaeightyfive.com/about/">About</a>
                    <ul>
                        <li><a href="http://victoriaeightyfive.com/disclaimer/">Disclaimer</a></li>
                    </ul>
                </li>
                <li><a href="http://victoriaeightyfive.com/contact/">Contact</a>
                    <ul>
                        <li><a href="http://victoriaeightyfive.com/new-page/">New page</a></li>
                    </ul>
                </li>
            </ul>	
        <!--end secondary-nav--></div>
    <!--end container--></div>

For the CSS I provided to work, you will need your markup to look like this.

I hope that makes sense...

If it helps, I've used your new menu as an example here. You can click on the Markup and CSS links to see them line by line.

victoriaeighty5 · 05-11-2012, 09:53 PM

Yeah that does make sense. I'm just not sure where I should put that bit of html?

I've got several possible files where it could go...
header.php
index.php
page.php

(these seem to be the most obvious ones).

Excavator · 05-11-2012, 10:03 PM

Quote:

Originally Posted by victoriaeighty5

Yeah that does make sense. I'm just not sure where I should put that bit of html?

I've got several possible files where it could go...
header.php
index.php
page.php

(these seem to be the most obvious ones).

I can't see your .php files on this end, I only get the rendered version after my browser puts them all together. Just search though and find your <div id="secondary-nav"> with it's included ul menu and edit that. I would guess your header.php but it may be at the top of index.php too.

Please, SAVE backup files so you can revert back to original!!!

victoriaeighty5 · 05-11-2012, 10:06 PM

Thanks for your help :-)

Here's my header.php code. Do you know where I should paste it/what I should replace?

Code:

<?php
/**
 * Header Template
 *
 * The header template is generally used on every page of your site. Nearly all other
 * templates call it somewhere near the top of the file. It is used mostly as an opening
 * wrapper, which is closed with the footer.php file. 
 *
 * @package Swedish Greys
 * @subpackage Template
 */
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<?php
// Get theme options. 
$logo = of_get_option('logo', '');
$show_tagline = of_get_option('show_tagline', '');
$show_primarynav = of_get_option('show_primarynav', '');
$show_secondarynav = of_get_option('show_secondarynav', '1');
$favicon = of_get_option('favicon', get_template_directory_uri() . '/images/favicon.ico' );
?>
<head>
<link href='http://fonts.googleapis.com/css?family=Pacifico|Wire+One|Leckerli+One' rel='stylesheet' type='text/css'>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'ntp_framework' ), max( $paged, $page ) );

	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />

<?php
// Favicon
if(isset($favicon) && $favicon != '') {
	?>
	<link rel="shortcut icon" href="<?php echo $favicon; ?>" />
<?php } else { ?>
	<link rel="shortcut icon" href="<?php echo get_template_directory_uri() . '/images/favicon.ico'; ?>" />
<?php } ?>
	
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<!--[if IE]>
        <link rel="stylesheet" id='ie-style-css' type="text/css" media='all' href="<?php get_template_directory_uri(); ?>/ie.css" />
<![endif]-->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php ntp_framework_head(); ?>

<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>

</head>

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
	<div id="header">
		<div class="wrapper">
 
			<div id="branding">
			
			<?php
    		// Show Primary Menu
    		// If one isn't filled out, no menu will show.  
			// The menu assiged to the secondary position is the one used.
			if(isset($show_primarynav) && $show_primarynav == '1') { ?>
				<div id="primary-nav">
					<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'fallback_cb' => false, 'theme_location' => 'primary' ) ); ?>
				</div><!-- #primary-nav -->
			<?php } 
			
			
				// Show logo
				if(isset($logo) && $logo != '') { 
					?>
					<div id="site-title"><a href="<?php echo home_url() ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><img src="<?php echo $logo;?>"/></a></div>
					<?php if ( is_home() || is_front_page() ) { ?>
        				<h1 id="blog-title"><a href="<?php echo home_url() ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></h1>
					<?php } else { ?>
        				<div id="blog-title"><a href="<?php echo home_url() ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></div>
					<?php } 
				
				} else {
					// Show text title
					?>
					
					<?php if ( is_home() || is_front_page() ) { ?>
        				<h1 id="site-title"><a href="<?php echo home_url() ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></h1>
					<?php } else { ?>
        				<div id="site-title"><a href="<?php echo home_url() ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></div>
					<?php } 
										
				}
				
				
				// Show header widget
				get_sidebar ('header'); 
				
				
				// Show Tagline
				if(isset($show_tagline) && $show_tagline == '1') { 
				?>
        			<div id="blog-description"><?php bloginfo( 'description' ) ?></div>
        		<?php } ?>
			
        		
        		
   			</div><!-- #branding -->
   			
		</div><!-- .wrapper -->
		
	</div><!-- #header -->
	
	<?php ntp_framework_after_header(); ?>	

	<?php
		// Show Secondary Menu	
		// If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  
    	// The menu assiged to the primary position is the one used.  
    	// If none is assigned, the menu with the lowest ID is used.  
		if(isset($show_secondarynav) && $show_secondarynav == '1') { ?>
			<div id="secondary-nav">
				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'secondary' ) ); ?>
			</div><!-- #secondary-nav -->
	<?php } ?>
	
	<?php ntp_framework_before_main(); ?>
	
	<div id="main">
		<div class="wrapper">

Excavator · 05-11-2012, 10:18 PM

Gotta love wordpress...

It may be you are getting over your head and might be better off just leaving a working menu alone. You did have it working before I butted in, haha

Where and how did you enter Home/Categories/Favourites and the rest of your menu items? That file contains your ul menu if you edit it directly instead of using WP's front end. Probably pretty confusing to go editing .php files though...

victoriaeighty5 · 05-11-2012, 10:22 PM

There's a menu creator in wordpress. I just named/identified the menu items and draged them into place on the hierarchy. It wasn't code. It was within their dashboard/site manager software.

Then I went into the CSS and edited the code you gave me to match the new menu items (their names and their links).

Excavator · 05-11-2012, 10:31 PM

Quote:

Originally Posted by victoriaeighty5

There's a menu creator in wordpress. I just named/identified the menu items and draged them into place on the hierarchy. It wasn't code. It was within their dashboard/site manager software.

Then I went into the CSS and edited the code you gave me to match the new menu items (their names and their links).

Yes, WP's front end. I've never actually worked with it. It's editing the actual .php markup that forms your menu. Not a big fan of front ends like that.

For that CSS I provided to work, your markup has to be edited and you can't do that from WP's front end.