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.

    https://touchoflight.wpengine.com/

    any ideas? thank you.

    @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="https://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">

    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="https://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)

    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.