Hi everyone,
I've just built a blog on http://www.princessoffinland.com and I am almost happy with the general outlook of the site. The only thing I am missing, is social media links to Pinterest, Twitter and Instagram. I have uploaded 3 icons to my child theme and positioned them on the rigt side of my header, where I think they fit, when working in my computers browser.
Now I have two challenges, that I could use some advice for:
1. How do I make the three social media icons appear at the same place, when opening my blog on a tablet or my I-phone?
And by "same place" I mean:
- above the horizontal line that devides the header from the post area
- in line with my page titles
- ending (at the right side) at the same position as my tagline & the horizontal line
2. How do I add my links to my icons?
I would prefer the most simple solution, since I am just a beginner with WP, PHP, HTML etc.
Please feel free to take a look at my site and the following code from my header.php and style.css.
Cheers
This is my header.php:
<?php
/**
* Template for site header
* @package themify
* @since 1.0.0
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php
/**
* Stylesheets and Javascript files are enqueued in theme-functions.php
*/
?>
<!-- wp_header -->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php themify_base_body_start(); // hook ?>
<div id="pagewrap">
<div id="headerwrap">
<?php themify_base_header_before(); // hook ?>
<header id="header" class="pagewidth">
<?php themify_base_header_start(); // hook ?>
<?php echo themify_base_site_title( 'site-logo' ); ?>
<?php if ( $site_desc = get_bloginfo( 'description' ) ) :
global $themify_customizer;
?>
<h2 id="site-description" class="site-description"><?php echo $themify_customizer->site_description(); ?></h2>
<?php endif; ?>
<nav>
<div id="menu-icon" class="mobile-button"><i class="icon-menu"></i></div>
<?php
wp_nav_menu( array(
'theme_location' => 'main-nav',
'fallback_cb' => 'themify_base_default_main_nav',
'container' => '',
'menu_id' => 'main-nav',
'menu_class' => 'main-nav'
));
?>
<!-- /#main-nav -->
</nav>
<?php themify_base_header_end(); // hook ?>
</header>
<!-- /#header -->
<?php themify_base_header_after(); // hook ?>
<div class="social-icons">
<a>
<img src="http://princessoffinland.com/wp-content/uploads/2014/11/twitter12.png" width="25" height="25"/>
<img style="padding-right:20px"/>
</a>
<a>
<img src="http://princessoffinland.com/wp-content/uploads/2014/11/pinterest11.png" width="25" height="25" />
<img style="padding-right:20px"/>
</a>
<a>
<img src="http://princessoffinland.com/wp-content/uploads/2014/11/instagram13.png" width="25" height="25" />
<img style="padding-right:20px"/>
</a>
</div>
</div>
<!-- /#headerwrap -->
<div id="body" class="clearfix">
<?php themify_base_layout_before(); //hook ?>This is my style.css:
@import url("../themify-base/style.css");
.social-icons {
float: right;
margin-right: 17%;
margin-top: -5.25%;
padding-left: 20%;
}