[Resolved] Add Social Icons in Header

Home Forums Support Add Social Icons in Header

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #117750
    Jamyz

    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'); ?>
    #117778
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Any reason why you’re not using the Header Widget in “Appearance > Widgets”?

    Might be the easier way to go πŸ™‚

    #117792
    Jamyz

    Maybe…. But i donΒ΄t display correctly…..
    And i like my icons..

    #117794
    Tom
    Lead Developer
    Lead Developer

    You can use your icons in the header widget as well?

    Where are you wanting them to display?

    #117795
    Jamyz

    i want to remove the blank.

    I need the icons in the border in the corner left of the picture.

    #117861
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #117867
    Jamyz

    Great.. That’s Works !!!
    Thanks you !!!

    #117959
    Tom
    Lead Developer
    Lead Developer
    #159304
    Markus Kosonen

    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?

    #159381
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It might be in “Appearance > Widgets” in the “Header” widget area.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.