CENTERING SOCIAL ICONS IN SIDEBAR

  • Author
    Posts
  • #2779400

    My social icons are located in the right hand side sidebar. I am wondering if there is a way to center them under its header. Any help is appreciated!

    The blog I need help with is revivingcharm.com.

    #2779493

    somayyehblog
    Member

    hello
    add a div tag under header and put social links with image in div tag.then make necessary changes in css file.
    read web design articles on the jahansite.com

    #2779494

    Thanks for the comment somayyehblog but I was hoping someone could help me and post the css code here. Thanks for the article but I only read English…

    #2779552

    sagebrownell
    Member

    Hello there!

    This is a two-step process, but it should work :)
    1) Replace the code, text, etc in your widget text block with the following:

    <ul class="social-list">
      	<li><a href="https://www.instagram.com/revivingcharm/"><img class="wp-image-7152" src="https://revivingcharm.files.wordpress.com/2016/06/instagram_reviving-charm-5_edited-1-logo1.png" alt="instagram_reviving-charm-5_edited-1-logo" width="22" height="22" data-pin-nopin="true"></a></li>
        <li><a href="https://www.pinterest.com/revivingcharm/"><img class="wp-image-7153" src="https://revivingcharm.files.wordpress.com/2016/06/pinterest_reviving-charm1-1-logo_edited-1.png" alt="pinterest_reviving-charm1-1-logo_edited-1" width="22" height="22" data-pin-nopin="true"></a></li>
        <li><a href="https://twitter.com/revivingcharm"><img class="wp-image-7155" src="https://revivingcharm.files.wordpress.com/2016/06/twitter_reviving-charm-logo_edited-1.jpg" alt="twitter_reviving-charm-logo_edited-1" width="22" height="21"></a></li>
        <li><a href="http://revivingcharm.tumblr.com/"><img class="wp-image-7154" src="https://revivingcharm.files.wordpress.com/2016/06/tumblr_reviving-charm-logo_edited-1.png" alt="tumblr_reviving-charm-logo_edited-1" width="22" height="22" data-pin-nopin="true"></a></li>
        <li><a href="https://www.bloglovin.com/blogs/reviving-charm-14572329"><img class="wp-image-7156" src="https://revivingcharm.files.wordpress.com/2016/06/bloglovin_reviving-charm1-logo_edited-1.png" alt="bloglovin_reviving-charm1-logo_edited-1" width="22" height="21" data-pin-nopin="true"></a></li>
      </ul>

    Then in your custom CSS area drop this code:

    .social-list {
    	width: 180px;
    	margin: 0 auto;
    }
    
    .social-list li {
    	border: none !important;
    	padding: 7px !important;
    	float: left;
    }

    Hope that helps!
    Sage

    #2779560

    Hi, Sage.
    Thanks for your help but unfortunately, it didn’t help.

    Does Sage or anyone else have any other suggestions?

    Thanks!

    #2779563

    sagebrownell
    Member

    Hi there!

    I’m not seeing the CSS show in your custom CSS area even to be overwritten, are you sure it’s in there? Do you have an upgraded account?

    Thanks,
    Sage

    #2779564

    Sage – I appreciate you commenting.

    Thank you..yes, I do have an upgraded account.
    Here is what I did:

    1. I went to “Appearance”
    2. Clicked on “Customize”
    3. Clicked “CSS” and added the coding you suggested. Then saved it

    Under CSS, if I click on “CSS Revisions” I see the code pop up under the “CSS Stylesheet Editor”.

    For some reason, the icons still do not center.

    #2779565

    sagebrownell
    Member

    Hey there!

    Would you mind pasting the contents of your custom CSS area in here so I can see if there’s any issues stopping the code?

    Thanks!
    Sage

The topic ‘CENTERING SOCIAL ICONS IN SIDEBAR’ is closed to new replies.