Move the Social Icons and Tagline


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Last Reviewed: 1-May-15 (3.3.20) 3.1.* 3.2.* 3.3.*

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:

 

SI = Right, above Tagline:

 

SI = Right, below Tagline:

 


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



25 thoughts on “Move the Social Icons and Tagline

  • Benny Diagi

    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

  • Ela P

    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!

  • Anthony

    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

    • Rocco Aliberti

      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:

      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

    Hi ,

    It is me again!

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

    Thanks !!!
    Helena

  • Helena

    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

      Hello Helena,
      you have this:

      why don’t you use this (I mean replace that with this code below)?

      Did this help?

      • Helena

        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.

  • JBATX

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

  • merida

    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

    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

    • Dave Bardell Post author

      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

    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

      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.

  • Cari

    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!! 🙂

Comments are closed.