WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Menu placing (6 posts)

  1. ferdri3
    Member
    Posted 2 years ago #

    Hello all,

    Im editing the theme TwentyTen and I want the menu above the wrapper.
    So I edited #access in style.css by adding "position" and "top":

    #access {
    	position: absolute;
    	top: 170px;
    	display: block;
    	float: left;
    	margin: 0 auto;
    	width: 470px;
    }

    As you can see the "width" is 470px instead of "940px" that is because I added a second menublock (which works fine). However, because of the "position: absolute;" the 2 menu's overlap instead of displaying NEXT to eachother.

    The "absolute" is needed in order to keep the menu's above the wrapper, otherwise I would of used "relative".

    My question is how to display them next to eachother above the wrapper.

    Thanks in advance!

  2. katmac_aus
    Member
    Posted 2 years ago #

    Have you got unique ids for each of these menus? If so try setting first menu to left:0; and the second menu to left:470px;

  3. ferdri3
    Member
    Posted 2 years ago #

    no I used the same id for both.. but what you said could actually work!

    Thanks, I am trying it now

  4. ferdri3
    Member
    Posted 2 years ago #

    edited all "access" styles.

    it worked katmac, however, now the first menu is all the way to the left of the screen. I tryed building a div around the both menu's in header.php with:

    margin: 0 auto;

    but no succes getting them to the middle.
    Any solution for this?

  5. katmac_aus
    Member
    Posted 2 years ago #

    Try margin-left to 0 on first one and margin-left to 470px on the second one. And delete left altogether.

  6. ferdri3
    Member
    Posted 2 years ago #

    worked it out. Added extra code to the extra div. For those who want to know:

    style.css

    #access_wr {
    	position: absolute;
    	top: 170px;
    	margin: 0 auto;
    	width: 940px;
    }
    #access {
    	position: absolute;
    	left: 0;
    	display: block;
    	float: left;
    	margin: 0 auto;
    	width: 470px;
    }
    #access2 {
    	position: absolute;
    	left: 470px;
    	display: block;
    	float: left;
    	margin: 0 auto;
    	width: 470px;
    }

    header.php

    <div id="access_wr">
    				<div id="access" role="navigation">
    		  			<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    					<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
    					<?php /* Our navigation 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.  */ ?>
    					<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    				</div><!-- #access2 -->
    				<div id="access2" role="navigation">
    		  			<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    					<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
    					<?php /* Our navigation 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.  */ ?>
    					<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'secondary' ) ); ?>
    				</div><!-- #access2 -->
    			</div>

    functions.php

    // This theme uses wp_nav_menu() in one location.
    	register_nav_menus( array(
    		'primary' => __( 'Primary Navigation', 'twentyten' ),
    		'secondary' => __( 'Secondary Navigation', 'twentyten' ),
    	) );

    Thanks katmac!

Topic Closed

This topic has been closed to new replies.

About this Topic