WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] align social media icons in header (12 posts)

  1. befree22
    Member
    Posted 1 year ago #

    Could someone help me align the social media icons on the same line as the date in the header? The date is aligned on the right side of the blog page and I want the social media icons aligned on the left side of the blog. Here's the current location of the social media icons.

    Ignore the TMM which appears -- it's the alt tag for the blog's banner image which I left out.

    Here's the css for the social media in my custom css: http://pastebin.com/SdAJ5Cd2

    NB: I read http://wordpress.org/support/topic/how-to-add-social-media-icons-in-header?replies=10

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which theme are you using?

  3. befree22
    Member
    Posted 1 year ago #

    A 2012 child theme. Here's a demo of the theme that Zeaks created: zeaks.org/ttodemo

  4. befree22
    Member
    Posted 1 year ago #

    Here's the header.php file at http://pastebin.com/9YS1nwpm

  5. befree22
    Member
    Posted 1 year ago #

    The css I'm using is aligning the social media icons vertically, and I want them aligned horizontally. What the problem? Here's the current css: http://pastebin.com/NFj2BeEu

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Something like this will get you partway there:

    #header_icons ul li {
       display: inline;
    }
    
    #header_icons {
       margin-top: 50px
    }

    Adjust the margin(s) according to what you want exactly.

  7. befree22
    Member
    Posted 1 year ago #

    It works beautifully! Thanks so much. Here's the css:

    /* Social media icons in header */
    #header_icons{
    float: left;
    margin-top: 0px;
    width:400px;
    }
    
    #header_icons li{
    float: left;
    margin: 5px 0px;
    display:inline;
    }
    
    #header_icons ul li {
    display: inline;
    }
  8. morgana123
    Member
    Posted 9 months ago #

    OK, I should be thinking more clearly!

    This is what I'm using in Custom CSS for theme Origami:
    /* Social media icons in header */
    .cnss-social-icon{
    float: right;
    margin-top: 800px;
    width:400px;
    }

    .cnss-social-icon li{
    float: right;
    margin: 5px 0px;
    display:inline;
    }

    .cnss-social-icon ul li {
    display: inline;
    }

    Using class instead of div b/c the table Easy Social Icons produces is table class="cnss-social-icon" ... Is there a better way to do this? URL is http://meganpetersenphoto.com and Megan wants icons to line up horiz with her name. I've gotten them (the table) to move the R as she wants but so far no vertical drop...

    I'd actually ideally like them to float on the R side of the header img if that's do-able ...?

    Can anyone help, please? Huge thanks if you can!! :}
    morgana123

  9. Andrew
    Forum Moderator
    Posted 9 months ago #

    You're not using the same theme as @befree22 are you?

  10. morgana123
    Member
    Posted 9 months ago #

    Sorry. I'm using Origami by Site Origin.

  11. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Then please post your own thread in:

    http://wordpress.org/support/theme/origami

  12. morgana123
    Member
    Posted 9 months ago #

    Ok ... thanks!!

Topic Closed

This topic has been closed to new replies.

About this Topic