WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

  1. 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?

  4. 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.

  7. 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?

        .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?

Leave a Reply