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;
}
@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!
UPDATE:
Sorry @tomaja I lied. 😛 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;
}
@sc0rpiongirl
Yes, I think you dont need that one from the “center…” snippet
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%;
}
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!
As I can see with firebug it seems that removing
.brand.span10.offset1 {
float: none;
}
will center the logo
@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%;
}
Thank you! 😀 Yea you were right…it’s the span that’s controlling the icons…Really thank you!
xx
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?
I will try to figure it out. Thanks again for your help!
