Aligning social media with site title in header

  • Resolved barnez

    (@pidengmor)


    9 years, 9 months ago

    Hi,

    I am trying to get a row of social media icons to align in the same horizontal plane as the site title and tagline. I’ve reduced the width of the tag line with css, but I can only place the icons above or below this horizontal area. This image shows what I would like to achieve.

    The site uses the Motif theme and can be seen here: http://test.englishlc.com/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter barnez

    (@pidengmor)

    9 years, 9 months ago

    Here is the header code from the child theme which contains the site title and tagline, with the inserted social media as “header-icons” class:

    <div class="site-branding">

			<?php if ( get_header_image() ) : ?>

			<div class="site-image">

				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="header-image-link">

					<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />

				</a>

			</div><!-- .header-image -->

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

			<?php if ( '' != get_bloginfo( 'description' ) ) : ?>

			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

			<?php endif; ?>

<div id="header-icons">

<ul>

<li><a href="http://www.englishlc.com/contact-us/"><img src=http://www.englishlc.com/wp-content/uploads/2013/11/email.png alt="Contact us" title="Contact us"></a></li>

<li><a href="http://www.englishlc.com/feed" target="_blank"><img src=http://www.englishlc.com/wp-content/uploads/2013/11/rss32px.png alt="RSS feed" title="RSS feed"></a></li>

<li><a href="https://plus.google.com/+EnglishLanguageCentre" target="_blank"><img src=http://www.englishlc.com/wp-content/uploads/2013/11/googleplus.png alt="ELC on Google+" title="ELC on Google+"></a></li>

<li><a href="https://twitter.com/englishlangcent" target="_blank"><img src=http://www.englishlc.com/wp-content/uploads/2013/11/twitter.png alt="ELC on Twitter" title="ELC on Twitter"></a></li>

<li><a href="https://www.facebook.com/pages/English-Language-Centre/289037641172669" target="_blank"><img src=http://www.englishlc.com/wp-content/uploads/2013/11/facebook.png alt="ELC on Facebook" title="ELC on Facebook"></a></li>

</ul>

</div>     

		</div><!-- .site-branding -->

    mrkred

    (@mrkred)

    9 years, 9 months ago

    If you have simply replicated the parent theme css, try adding margin-top: -70px to #header-icons in your child theme css.

    #header-icons {
    display: inline;
    float: right;
    margin-top: -70px;
    padding-left: 15px;
    width: 300px;
}
    Thread Starter barnez

    (@pidengmor)

    9 years, 9 months ago

    I have an empty child style.css which I am adding any modification too. I had most of the above for the header-icons class, but the margin-top: -70px; was the magic bullet.

    I’m no expert in css, but I’m learning, and can see that it rules supreme when it comes to styling pages.

    Many thanks for your advice!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Aligning social media with site title in header’ is closed to new replies.