WordPress.org

Ready to get started?Download WordPress

Forums

Center Header Image (3 posts)

  1. somethinglikelife
    Member
    Posted 1 year ago #

    I am trying to get my header image centered.
    I am driving myself crazy because I cant figure it out.
    I am using a mapped image, and so I inserted it directly into the header.php file.
    Link to the site.
    style.css here
    header.php here
    Not really sure where to start, but I've tried a lot and will try anything. Much appreciation in advanced!

  2. gabrielcastillo
    Member
    Posted 1 year ago #

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

    Header:

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <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(); ?>
    </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'); ?>" />
                </a>
                <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>
                </ul>
            <?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 -->
  3. somethinglikelife
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic