Support » Fixing WordPress » How to move MENU below HEADER image in Twenty Twelve theme

Viewing 15 replies - 16 through 30 (of 39 total)
  • Gracias!

    Many thanks, alchymyth!

    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.

    Michael

    (@alchymyth)

    Forum Moderator

    @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?

    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">
    Michael

    (@alchymyth)

    Forum Moderator

    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)

    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!

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

    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?

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

    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.

    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)

    esmi

    (@esmi)

    Forum Moderator

    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.

    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.

    But I will try that out these days, now Im just too tired to do more then coffee, copy & paste 😉 Now im curiuous about how it works…

Viewing 15 replies - 16 through 30 (of 39 total)
  • The topic ‘How to move MENU below HEADER image in Twenty Twelve theme’ is closed to new replies.