code snippets css Header Social Icons Tagline

Move the Social Icons and Tagline

by Dave Bardell|Published 8 October 2013

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

SI = Right, Tagline = Left:

/* START OF Move the Social Icons and Tagline */
/* Move SI to Right, adjust margins if needed   */
.navbar-inner .social-block {
float:          right;
margin-top:     10px;
margin-right:   0px;
text-align:     right;
}
/* Move Tagline to Left    */
.navbar-wrapper .navbar h2 {
float:          left;
margin-top:     10px;
margin-left:    20px;
text-align:     left;
}
/* Hide Tagline, if not needed */
.navbar-wrapper .navbar h2 {
display:        none;
}
/* END OF Move the Social Icons and Tagline */

SI = Right, above Tagline:

/* START OF Move the Social Icons and Tagline */
/* Move SI to Right, adjust margins if needed   */
.navbar-inner .social-block {
float:          right;
margin-right:   -30px;
text-align:     right;
}
/* Move Tagline to Right, adjust margins if needed  */
.navbar-wrapper .navbar h2 {
clear:          both;
float:          right;
margin-top:     0px;
margin-left:    20px;
text-align:     right;
}
/* END OF Move the Social Icons and Tagline */

SI = Right, below Tagline:

/* START OF Move the Social Icons and Tagline */
/* Move Tagline to Right, adjust margins if needed  */
.navbar-wrapper .navbar h2 {
clear:          both;
float:          right;
margin-top:     -30px;
margin-left:    20px;
text-align:     right;
}
/* Move SI to Right, adjust margins if needed   */
.navbar-inner .social-block {
float:          right;
position:       relative;
top:            40px;
margin-top:     0px;
margin-right:   -30px;
text-align:     right;
}
/* END OF Move the Social Icons and Tagline */

AUTHOR

Dave Bardell

My name is Dave Bardell (@rdellconsulting) and have been supporting the Forum since discovering this wonderful Theme in July 2013. Have learnt a lot from other Supporters (@ElectricFeet, @acub, @tomaja, and the maestro @d4z_c0nf, in particular). Have a library of snippets I've built up which in adding here, I'll try to acknowledge the original contributor but apologies to any I miss or wrongly attribute. daveb@rdellconsulting.com

0 posts

25 thoughts on “Move the Social Icons and Tagline”

25 comments

Benny Diagi
25 July 2016, 18 h 12 min

Hey Guys, please I really need your help here.
I have been trying to get my logo and menu button to be on the same line for ages!
I dont want a tag line. I just want the logo, social icons and menu bar to be inline. I’ve tried everything.
The way it is right now, it(header) takes up too much space on mobile view when the page loads up for the first time
- Menaka S
  26 July 2016, 4 h 14 min
  
  Hi,
  The developer team handles support for Customizr at https://wordpress.org/support/theme/customizr and for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site.
Ela P
13 February 2016, 18 h 46 min

I have the title on the upper left, primary menu on the upper right, secondary menu just below the primary menu and cannot move the tagline just below the title (lower left). I was trying with this code:

#secondary-menu ul {text-align: right; list-style-type: none;}
#secondary-menu ul li {display: inline-block; padding: 20px;}
.navbar-wrapper .navbar .site-description {
float: left;
margin-left: 10px !important;
text-align: left;
}

…to align the tagline as left as possible but the tagline is positioned next to the title. So, can somebody help me to move the tagline BELOW the title (I hope that then this code will work nice in term of left alignment). Thank you!
- Menaka S
  15 February 2016, 6 h 06 min
  
  Hi Ela,
  Our developer team handles support at https://wordpress.org/support/theme/customizr. Pose your question with a link to your site. Thanks.
  - Karan Tupe
    21 November 2016, 10 h 45 min
    
    Hi Meneka,
    I’m not able to view the “Social” tagline in my primary Sidbar ,I’m using the hueman theme.
Anthony
24 August 2015, 23 h 09 min

honestly I don’t know why this is not working for me… I just want to move the tagline left and social icons right. I know my child css is working al-right, because i have used it to add a fourth footer widget without any glitch? what might be the possible cause
Elaine
8 August 2015, 10 h 49 min

HI,

I want to let the facebook icon just beside my navbar. how should I do?
- Rocco Aliberti
  10 August 2015, 18 h 47 min
  Hello Elaine,
  if you leave the facebook url empty in the social links settings you’ll get rid of the facebook icon anywhere.
  If you want just remove it from the header, try adding the following to your custom css:
  
  .tc-header .icon-facebook { display: none; }
  
  Hope this helps
  
  p.s.
  if you have any caching plugin active remember to clean its cache and anyway clean your browser’s cache if you don’t see changes immediately.
Helena
8 June 2015, 22 h 33 min

Hi ,

It is me again!

Trying to make tagline = span 11 and SI span 1.
How can I get it?

Thanks !!!
Helena
Helena
5 May 2015, 21 h 23 min

Hi, Thanks for this update.
Just was I was looking for!

I changed this line :
‘ text-align: left!important;’
otherwise tagline was still right aligned 🙂
I am learning 😉

But I do not get that exactly the way I want….
‘margin-left: 0px!important;’ does not bring tagline to be aligned with nav-bar by left side. I have tried some other codes but no success.
Also when you have navigatin sticky tagline goes back to the right above the SI….

Can someone help me?

Thanks for taking the time to help.
- Rocco Aliberti
  6 May 2015, 13 h 51 min
  Hello Helena,
  you have this:
  
  /* Move Tagline to Left */ .navbar-wrapper .navbar h2 { float: right; margin-top: 10px; margin-left: 0px!important; text-align: left!important; }
  
  why don’t you use this (I mean replace that with this code below)?
  
  /* Move Tagline to Left */ .navbar-wrapper .navbar .site-description { float: left; margin-left: 10px !important; }
  
  Did this help?
  - Helena
    6 May 2015, 14 h 12 min
    
    Thanks Rocco,
    
    It did!!!
    
    By the Customize it was perfect.
    After saving, tagline was still aligned right.
    
    So I added this:
    text-align: left;
    
    Now it is exactly where I wanted.
    - Rocco Aliberti
      6 May 2015, 14 h 37 min
      
      Yeah sorry I missed that 😀
      Glad you solved 😉
      - Helena
        6 May 2015, 15 h 11 min
        
        Do not need to be sorry!
        This way I can check if I have learned something…
        🙂
JBATX
1 March 2015, 22 h 11 min

Thanks for the snippets, Dave.
My issue:
1. I swapped the Tagline and SI positions.
2. I need the Tagline to be left-justified to just above the top navgation menu word UPCOMING.
3. I need the SI to end just above the last navigational menu word MEMBERS.
I have fooled around with all kinds of left and right margin numbers but nothing works!
Any ideas? Thank you VERY much for your efforts!
JBATX
Here is my child theme CSS:

/* Your awesome customization starts here */
/* Move Tagline to Left */
.navbar-wrapper .navbar h2 {
float: left;
margin-top: 10px;
margin-left: 0px;
text-align: left;
}
/* Move SI to Right, adjust margins if needed */
.navbar-inner .social-block {
float: right;
margin-top: 10px;
margin-right: 45px;
text-align: right;
}
- JBATX
  1 March 2015, 22 h 12 min
  
  My site:
  http://austinhackney.org/
merida
11 September 2014, 20 h 02 min

i have my logo centered and am looking for a way to maximize the responsiveness. what i’d like to do is move the social icons above my centered logo (outside the navbar). then ideally i can center my menu and decrease the navbar width so minimal reduction of the page size doesn’t trigger the responsive “menu” button. make sense?

i understand how to center the menu and navbar and adjust the width % of the navbar box. i am hung up on moving the social icons above the centered logo.

thank you!
Dan
21 May 2014, 12 h 33 min

Hi – I’m working with the customizr theme for the first time. I have been trying to figure out how to move the social icons and tagline out of the navigation, if that’s possible? I want the SI in the footer only and to move the tagline underneath the site title/logo.

any suggestions on how to do this is greatly appreciated.

thanks
Laksh
2 January 2014, 5 h 16 min

HI Dave
Thanks for everything posted here.How to add social icons in navbar list items…
- Dave Bardell Post author
  10 January 2014, 13 h 24 min
  
  Sorry, I don’t understand your question? Here’s all the Snippets relating to Social Icons.
  
  If that doesn’t help, I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
Simona
22 October 2013, 14 h 11 min

Hi Dave, thank you for these Snippets, I’m very very new to WP and I’m finding them very useful!

I have a problem, though: I am trying to move the tagline to the left (on the right of the logo), but when I copy/paste your settings it moves further on the right side of the page!

I am trying to learn something about HTML and CSS, but as an absolute beginner, I am not able to understand what I’m doing wrong.

Thank you very much for your help and your time.
- Dave Bardell Post author
  3 November 2013, 13 h 03 min
  
  Sorry for delay in responding.
  
  Most of these Snippets are tested standalone, so it is possible that when added to other CSS code they don’t work quite as intended. I’d suggest the Forum would be a better place to get a solution for this, and include a link to your Site.
  
  Thanks for using Customizr.
  - Simona
    4 November 2013, 19 h 17 min
    
    Thanks, I’ll do that.
Cari
16 October 2013, 23 h 43 min

Hi Dave – was super proud of myself: been using div span 12’s (I know, not what they’re called) like it’s my job and found this forum without asking a question! However…it doesn’t answer what I’m trying to achieve 🙁

I do want social icons on the right, BUT I want them to be above or below the tagline (my tagline is the email and phone number) ((so both being float: right)). Whereas this snippet puts them within the same line.

Is there a fix for that?

http://www.ispeakdogtraining.com

Thanks!! 🙂
- Dave Bardell Post author
  17 October 2013, 10 h 05 min
  
  Keep it up! I’ve added 2 more boxes to the Snippet to answer your question. Hope that helps!

Comments are closed.