WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] Move header image to upper right corner (7 posts)

  1. dchfr
    Member
    Posted 1 year ago #

    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!

  2. gcoulby
    Member
    Posted 1 year ago #

    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 {
        float:right;
    }

    Hope this helps

  3. dchfr
    Member
    Posted 1 year ago #

    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?

  4. gcoulby
    Member
    Posted 1 year ago #

    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

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

    Then add this to you CSS

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

    That should do the trick

  5. gcoulby
    Member
    Posted 1 year ago #

    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.

  6. dchfr
    Member
    Posted 1 year ago #

    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!!

  7. gcoulby
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic