Support » Theme: Twenty Twelve » Move header image to upper right corner

  • Resolved dchfr


    Thanks to alchymyth I know how to move my header image above the navigation menu. However, I would be even happier with the image – actually a logo in my case – in the upper right corner of the page (but of course still within the white area, i.e. not in an absolute position w.r.t. the window itself). Any tip would be much appreciated!

Viewing 6 replies - 1 through 6 (of 6 total)
  • provided you haven’t changed the class of the logo, when moving it above the navigation, it should be .header-image if so just float it to the right.

    .header-image {

    Hope this helps

    Thank you, this moves the logo to the right, indeed, but not to the top-right corner, because I have the title in the top-left, and le logo still underneath. How could I position the title and the logo at the same level?

    I KNOW clearly you tried that and failed just like I did.

    So here. Make sure the header-image is located inside of hgroup but before h1

    like this

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

    Then add this to you CSS

    .header-image {
    .site-header h1, .site-header h2 {
        margin-top:-20px;       /* This can be set to 0 but on my screen it's still too low */

    That should do the trick

    Another thing to remember is relative positioning, which allows you to move any div or class around it’s original point. Similar to absolute but it still stays in it’s box. Float is generally the best way though, in most circumstances as it locks it’s self to the wall or adjacent div.

    OK, I had to set different margin-top parameters for each of h1, h2 and the image separately to fine-tune vertical positioning, but that does the trick, indeed.
    Thank you very much!!

    Not a problem, now I just have to hope someone can solve my post by tomorrow! Haha. Glad you have it working now.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Move header image to upper right corner’ is closed to new replies.