Support » How-To and Troubleshooting » Center Header Image

Center Header Image

Viewing 2 replies - 1 through 2 (of 2 total)
  • Looks like you need some serious help, you have a lot of errors in your code. Also looking at your site’s front-end looks like you have open tags and duplicate output for the header.

    Here is something you could try. Remember to backup any file you change so you can always go back.

    CSS Code:

    #logo {display:block; text-align:center;}
                    #header-social-links {list-style:none; position:relative; right:100px; top:10px;}
                    #header-social-links li {float:left; margin-left:1px;}
                    #header-social-links li a {display:block; height:65px; width:45px; cursor:pointer;}


    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><?php wp_title(); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_head(); ?>
    <body <?php body_class() ?>>
            <div id="wrapper">
            <header id="header">
            <?php pinboard_title_tag( 'site' ); ?> id="site-title">
            <?php if ( ( '' != get_header_image() ) &&  ( false != get_header_image() ) ) : ?>
                <a id="logo" href="<?php echo home_url( '/' ); ?>" rel="home">
                    <img src="<?php get_header_image(); ?>" alt="<?php bloginfo('name'); ?>" />
                <ul id="header-social-links">
                    <li><a href="https://www.facebook.com/somethinglikelifeblog" alt="Something Like Life Blog on Facebook!" title="Something Like Life Blog on Facebook!">&nbsp;</a></li>
                    <li><a href="http://pinterest.com/brittanymcglade/" alt="Something Like Life Blog on Pinterest!" title="Something Like Life Blog on Pinterest!">&nbsp;</a></li>
                    <li><a href="https://twitter.com/mammamcg" alt="Something Like Life Blog on Twitter!" title="Something Like Life Blog on Twitter!">&nbsp;</a></li>
                    <li><a href="http://instagram.com/mammamcg" alt="Something Like Life Blog on Instagram!" title="Something Like Life Blog on Instagram!">&nbsp;</a></li>
            <?php endif; ?>
            <a class="home" href="<?php echo home_url( '/' ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
            <?php pinboard_title_tag( 'site' ); ?>>
            <?php if( ! is_active_sidebar( 1 ) ) : ?>
                <?php pinboard_title_tag( 'desc' ); ?> id="site-description">
                <?php bloginfo( 'description' ); ?>
                <?php pinboard_title_tag( 'desc' ); ?>
            <?php endif; ?>
            <?php get_sidebar( 'header' ); ?>
            <div class="clear"></div>
            <nav id="access">
                <a class="nav-show" href="#access">Show Navigation</a>
                <a class="nav-hide" href="#nogo">Hide Navigation</a>
                <?php wp_nav_menu( array( 'theme_location' => 'primary_nav' ) ); ?>
                <div class="clear"></div>
            </nav><!-- #access -->
    </header><!-- #header -->

    When I tried that the page displayed with no formatting. I know that the code is a bit messy, what I am trying to do is have the header image mapped to have clickable links within the image. But I’m happy with how everything is working, except I cannot get the image to center. I appreciate all help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Center Header Image’ is closed to new replies.