Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts

    How to centralise submenu drop downs?

    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;
    }

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.
    Last edited by SB65; 05-11-2012 at 04:26 PM.

  • Users who have thanked SB65 for this post:

    victoriaeighty5 (05-11-2012)

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    victoriaeighty5 (05-11-2012)

  • #5
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by victoriaeighty5 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    victoriaeighty5 (05-11-2012)

  • #7
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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...

  • #8
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Should it go in the header.php file?

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

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by victoriaeighty5 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    victoriaeighty5 (05-11-2012)

  • #10
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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).

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by victoriaeighty5 View Post
    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!!!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    victoriaeighty5 (05-11-2012)

  • #12
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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">

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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).

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by victoriaeighty5 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    victoriaeighty5 (05-11-2012)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •