Support » Themes and Templates » align social media icons in header

Viewing 11 replies - 1 through 11 (of 11 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Which theme are you using?

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

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

    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

    WPyogi

    (@wpyogi)

    Forum Moderator

    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.

    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;
    }

    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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    Sorry. I’m using Origami by Site Origin.

    WPyogi

    (@wpyogi)

    Forum Moderator

    Then please post your own thread in:

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

    Ok … thanks!!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘align social media icons in header’ is closed to new replies.