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.
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?
Here’s 2 methods. Not tested on Altitude Pro so they’ll probably need tweaking.
Here’s 1 i tweaked
Dalton, you the man.
Sounds like it worked!
Yep 🙂
Thanks! Just what I was looking for!
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.
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.
Thanks for this info. How to place social media icons in Primary Navigation menu above the Header in Genesis Prose theme?
You need to add a widget in the nav menu.http://wpsites.net/web-design/add-google-custom-search-to-genesis-nav-menu/
Thanks for this tip, Brad. Have seen you on the Genesis forum and glad to have found your site, too.
You’re welcome Tammy
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?
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.
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?
This is just brilliant. Never thought at putting the social networks icons there, most used the header widget for Google Adwords
Does it convert?