• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Display Header Right Widget Custom Menu & Social Icons In-Line

In this tutorial, i’ll provide the CSS code which enables you to display both a custom menu widget and simple social icons widget inline when populated in the header right widget area of any StudioPress theme.

Here’s what i’m referring to:

header right widgets

Simply add this CSS code to the end of your child themes style.css file.

.site-header .widget-area {
    width: 600px;
}
 
.simple-social-icons {
    float: right;
	margin-top: 10px;
}

.widget_nav_menu {
    float: left;
}

If you want to align the social buttons to the left, simply change the code above to this:

.site-header .widget-area {
    width: 600px;
}
 
.simple-social-icons {
    float: left;
	margin-top: 10px;
}

.widget_nav_menu {
    float: right;
}

header widgets

Reduce the width of the .site-header .widget-area area to reduce the space between both widgets.

You can use this code as a guide to align other widgets you populate in the header right widget area of any StudioPress child theme.

Widgets

Simply drag in the widgets you want to display inline.

Widgets

You will need to add your own CSS to the Media Queries section of your child themes style sheet depending on which widgets you populate in the header right area.

More Tips You May Find Useful

  • Add Social Icons After Header Right Widget Nav Menu
  • Social Icons Inline With Header Right Widget Nav Menu
  • Display Search Box Widget In-Line With Social Icons In Header Right
  • Add Text Phone Number Inline With Custom Nav Menu in Header Right Widget

Agency Pro Theme

Reader Interactions

Comments

  1. Jdub3 says

    February 10, 2017 at 3:39 pm

    My Altitude Pro Widgets admin page does not have a Header Right Widget Area.
    It only has Primary Sidebar, Front Page 1-7, Footer 1 and After Entry.
    How is the Header Right Widget Area activated?

    Log in to Reply
    • Brad Dalton says

      February 11, 2017 at 12:30 am

      Here’s 2 methods. Not tested on Altitude Pro so they’ll probably need tweaking.

      Here’s 1 i tweaked

      Log in to Reply
  2. David Thomas says

    May 27, 2014 at 5:18 pm

    Dalton, you the man.

    Log in to Reply
    • Brad Dalton says

      May 27, 2014 at 5:19 pm

      Sounds like it worked!

      Log in to Reply
      • David says

        May 27, 2014 at 9:16 pm

        Yep 🙂

        Log in to Reply
  3. Kristie says

    May 9, 2014 at 8:43 pm

    Thanks! Just what I was looking for!

    Log in to Reply
  4. liz says

    January 30, 2014 at 2:06 pm

    I am trying to see how I can add (back) the social icons into my header now that I’ve customised it to be full width. I can’t think how to do this as the 1140px jpg accommodating my logo is now going to override that header-right widget area.

    I am using Streamline pro, which originally had social icons on the right header slot. I guess it’s case of just placing them elsewhere? I did think the right side of the primary navbar might be a good slot – do you know how I’d go about that? Thanks for any help! I’ve been scouring genesis forums for this and came across your insights on many Qs.

    Log in to Reply
    • Brad Dalton says

      January 30, 2014 at 2:37 pm

      You can add a widget to the right side of the nav menu in Genesis using this PHP code.

      Or you could hook in another header right widget area.

      Log in to Reply
  5. Rajan says

    December 18, 2013 at 9:00 am

    Thanks for this info. How to place social media icons in Primary Navigation menu above the Header in Genesis Prose theme?

    Log in to Reply
    • Brad Dalton says

      December 18, 2013 at 9:18 am

      You need to add a widget in the nav menu.http://wpsites.net/web-design/add-google-custom-search-to-genesis-nav-menu/

      Log in to Reply
  6. Tammy says

    November 29, 2013 at 5:39 pm

    Thanks for this tip, Brad. Have seen you on the Genesis forum and glad to have found your site, too.

    Log in to Reply
    • Brad Dalton says

      November 29, 2013 at 6:22 pm

      You’re welcome Tammy

      Log in to Reply
  7. Charles Specht says

    November 24, 2013 at 12:52 am

    This is a good tutorial. However, in the mobile responsive, the icons are all to the right under my nav menu. How do I center them under the nav menu in mobile responsive?

    Log in to Reply
    • Brad Dalton says

      November 24, 2013 at 7:15 am

      Center them in the Media Queries.

      You have the classes there for both so its very easy to customize the mobile view at different screen sizes anyway you like.

      Log in to Reply
      • Charles Specht says

        November 25, 2013 at 7:05 pm

        I’m not sure what the code should be. Should it be something like this?

        .site-header .widget-area {
        	text-align: center;
        }
        
        or maybe have:
        float: none;
        
        or should it be:
        .simple-social-icons {
                text-align: center;
        }

        I suspect probably not, because none of that worked. lol

        Could you share what the code would be?

        Log in to Reply
  8. Zimbrul says

    November 23, 2013 at 10:05 pm

    This is just brilliant. Never thought at putting the social networks icons there, most used the header widget for Google Adwords

    Log in to Reply
    • Brad Dalton says

      November 24, 2013 at 7:15 am

      Does it convert?

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.