WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Reposition Social Media Icons in Header (12 posts)

  1. sc0rpiongirl
    Member
    Posted 8 months ago #

    I need to center the menu so I went about using this tip to achieve that. But that way I lose all the social media icons due to the new filter prevent them showing when menu are center, which makes sense.

    My question is how I could reposition the social media icons on the very top right corner of the website now that I center the logo and the menu bar, because although the icons are still in the lower left corner in the footer, I do want them to show on the top right corner in the header as well.

    Anyone help would be greatly appreciated!

    Many thanks!

  2. tomaja
    Member
    Posted 8 months ago #

    Hi cs0rpiongirl

    you can use this function (you need to paste it to functions.php of your child theme) to place social icon block from header to the upper right position

    add_action ( 'wp_head' , 'move_my_social_icons');
    function move_my_social_icons() {
    	remove_action  ( '__navbar', array( TC_header_main::$instance , 'tc_social_in_header'), 10 );
    	add_action  ( '__before_header', array( TC_header_main::$instance , 'tc_social_in_header'), 0 );
    }
    and also you need to add this to your custom css
    .social-block.span3 {
    float: right;
    }
  3. sc0rpiongirl
    Member
    Posted 8 months ago #

    @tomaja Thanks for the reply. I tried with the codes you provided but it didn't work...the icons didn't show...do you think it might be the reason there are some conflicts with the "center the header" function?

    Thanks again!

  4. sc0rpiongirl
    Member
    Posted 8 months ago #

    UPDATE:

    Sorry @tomaja I lied. :P It worked! The icons do show up on the top left side, but then the logo which was centered now being pushed offset a bit and no longer center...perhaps need a bit of tweak on the css of header? Can you take a look at my codes and help me point out the conflicts?

    Many thanks!

    .navbar-wrapper .navbar h2 {
    color :#33cccc;
    }
    h2.site-description {
    color: #666666;
    font-size: 14px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
    }
    
    .social-block.span3 {
    float: right;
    }
    
    /* Center the logo (function custom_center_brand)       */
    .brand.span10.offset1 {
    float:      none;
    }
    /* Center the Tagline                                   */
    .tc-header .outside {
    display:    block;
    text-align: center;
    }
    
    /* Center the Menu (function remove_span9_navbar_display) */
    /* Center the Menu (function prevent_social_in_header)  */
    .navbar-inner .row-fluid .span7.site-description {
    display:    none;
    text-align: center;
    }
    .navbar-wrapper .navbar.notresp.row-fluid {
    float:      none;
    width:      90%;
    margin:     0 auto;
    }
    .navbar .navbar-inner {
    padding:    20px 0 0;
    }
  5. tomaja
    Member
    Posted 8 months ago #

    @sc0rpiongirl
    Yes, I think you dont need that one from the "center..." snippet

  6. tomaja
    Member
    Posted 8 months ago #

    It would be easier to align it to the left, just with removing float:right; Still. you can try adding

    .social-block.span3 {
    position: absolute;
    float: right;
    left:90%;
    }
  7. sc0rpiongirl
    Member
    Posted 8 months ago #

    Thanks for the prompt reply @tomaja :) But the center logo is still off...I put it in a test site, here is the link so you could take a look...how do I ensure the logo back to center...?

    http://scarlettshop.com/kmrc/

    Thank you!

  8. tomaja
    Member
    Posted 8 months ago #

    As I can see with firebug it seems that removing

    .brand.span10.offset1 {
        float: none;
    }
    will center the logo

  9. tomaja
    Member
    Posted 8 months ago #

    @sc0rpiongirl
    I can see now why previous css code didnt work, you have changed social block width to span5 so you need to change span3 to span5 e.g.:

    .social-block.span5 {
    position: absolute;
    float: right;
    left:70%;
    }
  10. sc0rpiongirl
    Member
    Posted 8 months ago #

    Thank you! :D Yea you were right...it's the span that's controlling the icons...Really thank you!

    xx

  11. sc0rpiongirl
    Member
    Posted 8 months ago #

    sorry, one more thing...now that the icons float to the right but they are out of the wrapper...how do I put them back in the wrapper?

  12. sc0rpiongirl
    Member
    Posted 8 months ago #

    I will try to figure it out. Thanks again for your help!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.