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:
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;
}
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.
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.
Jdub3 says
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?
Brad Dalton says
Here’s 2 methods. Not tested on Altitude Pro so they’ll probably need tweaking.
Here’s 1 i tweaked
David Thomas says
Dalton, you the man.
Brad Dalton says
Sounds like it worked!
David says
Yep 🙂
Kristie says
Thanks! Just what I was looking for!
liz says
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.
Brad Dalton says
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.
Rajan says
Thanks for this info. How to place social media icons in Primary Navigation menu above the Header in Genesis Prose theme?
Brad Dalton says
You need to add a widget in the nav menu.http://wpsites.net/web-design/add-google-custom-search-to-genesis-nav-menu/
Tammy says
Thanks for this tip, Brad. Have seen you on the Genesis forum and glad to have found your site, too.
Brad Dalton says
You’re welcome Tammy
Charles Specht says
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?
Brad Dalton says
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.
Charles Specht says
I’m not sure what the code should be. Should it be something like this?
I suspect probably not, because none of that worked. lol
Could you share what the code would be?
Zimbrul says
This is just brilliant. Never thought at putting the social networks icons there, most used the header widget for Google Adwords
Brad Dalton says
Does it convert?