WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] How to move MENU below HEADER image in Twenty Twelve theme (40 posts)

  1. mollystillman
    Member
    Posted 1 year ago #

    Hello - I would like to know how to move the MENU below the HEADER image in the Twenty Twelve theme.

    My blog URL is http://www.themollybuckley.com

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    ideally in a child theme of Twenty Twelve, move this section of header.php:

    <nav id="site-navigation" class="main-navigation" role="navigation">
    ...
    ...
    		</nav><!-- #site-navigation -->

    to just before:

    </header><!-- #masthead -->
  3. mollystillman
    Member
    Posted 1 year ago #

    YAY! it worked! thank you!!

  4. tzweers
    Member
    Posted 1 year ago #

    This was just what I needed, thanks.

  5. ian277
    Member
    Posted 1 year ago #

    I would also like to move the menu to below the header image.

    I copied the header.php from the twentytwelve theme and pasted it into my twentytwelve child theme right under the style.css import as you directed Alchymyth. I didn't see any changes. Am I doing it correctly?

    http://www.heavybrunch.com

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    pasted it into my twentytwelve child theme right under the style.css import

    style.css is only for css;

    you need to create a header.php in the child theme's folder;

    you will need to use ftp or the file management system of your hoster to do this; http://codex.wordpress.org/FTP_Clients

  7. ian277
    Member
    Posted 1 year ago #

    Ok, I created a header.php and copied the header.php from the twentytwelve theme uploaded it through cyberduck to my child theme folder and placed the code verbatim what you said to do, but no changes. Are there any spaces I should know about?

    thanks

  8. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    the whole header.php should look like this after the changes:

    http://pastebin.com/SLtLAeqw

  9. ian277
    Member
    Posted 1 year ago #

    Wow, that's great thanks.

    I copied what you sent and pasted it to a header.php I created in dreamweaver and uploaded it to my child theme folder but no changes. Am I missing something?

  10. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    have a look at the header.php via dashboard - appearance - editor; make sure the child theme is selected, then select header.php from the list on the right;

    what is the code in there?

  11. ian277
    Member
    Posted 1 year ago #

    Here it is -

    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package WordPress
     * @subpackage Twenty_Twelve
     * @since Twenty Twelve 1.0
     */
    ?><!DOCTYPE html>
    <!--[if IE 7 | IE 8]>
    <html class="ie" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 7) | !(IE 8)  ]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
    	<header id="masthead" class="site-header" role="banner">
    		<hgroup>
    			<h1 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    		</hgroup>
    
    		<?php $header_image = get_header_image();
    		if ( ! empty( $header_image ) ) : ?>
    			<a>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    		<?php endif; ?>
    
    				<nav id="site-navigation" class="main-navigation" role="navigation">
    			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    			<div class="skip-link assistive-text"><a href="#content">"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    		</nav><!-- #site-navigation -->
    
    	</header><!-- #masthead -->
    
    	<div id="main" class="wrapper">

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. Or better still - use the pastebin. As it stands, your code has now been permanently damaged/corrupted by the forum's parser.]

  12. ian277
    Member
    Posted 1 year ago #

    Sorry, here's the pastebin

    http://pastebin.com/YLZGmVU4

  13. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    your cache plugin might be holding on to and showing old stuff:

    <!-- Cached page generated by WP-Super-Cache on 2012-11-12 22:19:50 -->

  14. ian277
    Member
    Posted 1 year ago #

    Oh man, I see that now. And it's changed now. Thank you so much Alchymyth.

    P.S. - Alchymyth = Rad name.

  15. mapBaker
    Member
    Posted 1 year ago #

    Thanks this worked great!

  16. sparker
    Member
    Posted 1 year ago #

    Thanks, Alchymyth! Knew I'd find an easy answer on wordpress.org.

    Steve

  17. viv85e
    Member
    Posted 1 year ago #

    Gracias!

  18. leejosepho
    Member
    Posted 1 year ago #

    Many thanks, alchymyth!

  19. turiyamoore
    Member
    Posted 1 year ago #

    alchymyth,

    thanks for all you do here. your posts have been helping me for a long time.

    I moved my nav in twenty twelve below the header image exactly (as far as I can tell) as you have said here. but when I squeeze the window as if in a smaller device the menu and the menu toggle don't match up. the menu links stay visible and the toggle performs no function.

    http://touchoflight.wpengine.com/

    any ideas? thank you.

  20. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    @turiyamoore

    please post the full code of header.php as it is now in your theme.

    you somehow seem to have lost the #menu-top-menu css id ...
    did you possibly create a new custom menu?

  21. turiyamoore
    Member
    Posted 1 year ago #

    Here you go. Thanks for getting back to me. Really appreciate it!

    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package WordPress
     * @subpackage Twenty_Twelve
     * @since Twenty Twelve 1.0
     */
    ?><!DOCTYPE html>
    <!--[if IE 7 | IE 8]>
    <html class="ie" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 7) | !(IE 8)  ]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
    	<header id="masthead" class="site-header" role="banner">
    		<hgroup>
    			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    		</hgroup>
    
    		<?php $header_image = get_header_image();
    		if ( ! empty( $header_image ) ) : ?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    		<?php endif; ?>
    
    				<nav id="site-navigation" class="main-navigation" role="navigation">
    			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    			<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    		</nav><!-- #site-navigation -->
    
    	</header><!-- #masthead -->
    
    	<div id="main" class="wrapper">
  22. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    the code seems ok;

    however, this line:

    display: inline-block !important;

    in this style in style.css of the child theme seems to cause the problem:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
        border-bottom: 0px solid #EDEDED;
        border-top: 1px solid #EDEDED;
        display: inline-block !important;
        text-align: right;
        width: 100%;
    }

    try to remove the line.

    why was it added in the first place?
    (with the extra !important enforcement)

  23. turiyamoore
    Member
    Posted 1 year ago #

    Interesting.

    I copied that chunk of css from the parent and only changed text align to left and messed with the borders. the line with !important was already there, and I just left it there.

    Here is the original section from twenty twelve:

    .main-navigation ul.nav-menu,
    	.main-navigation div.nav-menu > ul {
    		border-bottom: 1px solid #ededed;
    		border-top: 1px solid #ededed;
    		display: inline-block !important;
    		text-align: left;
    		width: 100%;
    	}

    I still don't have a good idea how these things work. But taking it out of the child fixed it.

    I have the habit of bringing a chunk of css into my child style and just making minor changes, thinking that the lines I don't change don't hurt to be there. Is that not true? Can they alter functions of the parent by being in the child in the same form as the original?

    I really appreciate your help and the wordpress forums!

    Thanks!

  24. wanyuchou
    Member
    Posted 1 year ago #

    Thank you so much guys. I was just looking for a solution of moving menus down! It works! Thank you.

  25. HaHaYouSuck
    Member
    Posted 1 year ago #

    I've been following along, and the good news is the image has moved to the top where I want, but I've lost my custom menu. Anyone know how to mod the child theme to use the custom menu?

  26. HaHaYouSuck
    Member
    Posted 1 year ago #

    Also, I should point out this doesn't look right in IE, or Chrome. I only tested it with Chrome, FF, and IE

  27. HaHaYouSuck
    Member
    Posted 1 year ago #

    About the browser thing, I was wrong. I had made some changes in style.css I had forgotten about. Sorry. I'm still wishing my custom menu comes back after modifying header.php though. Thanks.

  28. AtillaBoz
    Member
    Posted 1 year ago #

    Hello everybody. I did it like this:

    First I just deleted the title in the hgroup area. I did not really delete the code but just made it invisible with this tag: <!-- Invisible Code bla bla -->

    Then I added a picture by its link to the header area. I uploaded the banner ine the media gallery before so I can go and copy the link from there.

    I then linked the Banner up to the homepage and gave the link a title.

    I thought this works ok, because it always worked good with the non responsive themes. Now I went to the page of mollystillman and checked the code with firebug. The missing link for me was this part: class="header-image"

    If you add that one to your pic the banner will act responsive and get smaller if you make the browser smaller.

    <hgroup>
                            <a href="index.php" title="FW-Angeln-Pur"><img class="header-image" src="http://fw-angeln-pur.com/wp-content/uploads/2013/01/fw-angeln-koeln.jpg" width="960"></a>
    			<!-- H1 and H2 TAGS ARE INVISIBLE / NOT ACTIVE
    			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    			-->
    		</hgroup>

    You can see the results on these pages:
    catfish fishing tackle online: fw-angeln-pur.com
    Köln-Porz, Business Community*: porz.biz

    I hope I could help somebody with this. Best wishes to everybody from Germany.

    *(still in construction at this time)

  29. esmi
    Forum Moderator
    Posted 1 year ago #

    Do not edit the Twenty Twelve theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes. Or use a custom CSS plugin.

  30. AtillaBoz
    Member
    Posted 1 year ago #

    Creating a child theme looks quite complicated for me honestly - I am just trying to finish it in time quick, and yes a little bit dirty, too. I know I will think of you at the next update when my banner is gone but that`s ok with me for now.

    At least next time I will know why it`s gone.

    Thank you for your help.

Topic Closed

This topic has been closed to new replies.

About this Topic