Archived topic
Add Social Icons in Header
9 replies · Started by Jamyz on June 30, 2015
Hi !!!
I need a little help.
I use the Mantle theme. And i try to insert Social Icons in the Header background.
In the style.css of Mantle i insert
.social {
float: left;
margin-left: 10px;
margin-top: 10px;
} In the header.php of GeneratePress i insert.
<div class="social">
<?php echo do_shortcode('[aps-social id="1"]')?>
</div>But the Social Icons are under the background....
I need the social icons in front of the background. How i do ???
Thank you....
My header.php
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <main id="main">
*
* @package GeneratePress
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<?php if ( ! function_exists( '_wp_render_title_tag' ) ) : ?>
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php endif; ?>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body itemtype="http://schema.org/WebPage" itemscope="itemscope" <?php body_class(); ?>>
<?php do_action( 'generate_before_header' ); ?>
<header itemtype="http://schema.org/WPHeader" itemscope="itemscope" id="masthead" role="banner" <?php generate_header_class(); ?>>
<div <?php generate_inside_header_class(); ?>>
<?php do_action( 'generate_before_header_content'); ?>
<?php generate_header_items(); ?>
<?php do_action( 'generate_after_header_content'); ?>
</div><!-- .inside-header -->
<div class="social">
<?php echo do_shortcode('[aps-social id="1"]')?>
</div>
</header><!-- #masthead -->
<?php do_action( 'generate_after_header' ); ?>
<div id="page" class="hfeed site grid-container container grid-parent">
<div id="content" class="site-content">
<?php do_action('generate_inside_container'); ?>Hi there,
Any reason why you're not using the Header Widget in "Appearance > Widgets"?
Might be the easier way to go :)
Maybe.... But i don´t display correctly.....
And i like my icons..
You can use your icons in the header widget as well?
Where are you wanting them to display?
i want to remove the blank.
I need the icons in the border in the corner left of the picture.
You best bet is to add those icons in a "Text" widget to the "Header" widget area.
Then add this CSS:
.inside-header {
position: relative;
}
.header-widget {
position: absolute;
left: 10px;
bottom: 10px;
}Hope this helps :)
Great.. That's Works !!!
Thanks you !!!
You're welcome :)
I have added a social icon in the inside-header next to the social menu done with Simple Social Icons (Mantle-theme). I have forgot how i did it, so could you refresh my memory. I need to change the link and image of the right side link. How can I do this?
Hi there,
It might be in "Appearance > Widgets" in the "Header" widget area.