WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Position Header Right Widget In Genesis

By default, Genesis includes a widget area for most child themes which displays content in the right side of the header.

If you change the height of your header area for any reason, you may need to re-position where the content in your header right widget displays.

Here’s the default CSS rules you can use to position your header right widget.

.site-header .widget-area {
    float: right;
    width: 75%;
}

Note: CSS classes Work with HTML 5 themes only.

You can easily add new declarations to this rule and re-position your widget in the header.

Adding Padding

You can add padding to the above code to change the position of your header widget.

Here’s some examples of padding properties which you can use to adjust the values based on where you want your widget content to display in your header:

.site-header .widget-area {
float: right;
width: 75%;
padding-top:50px;
padding-bottom:50px;
padding-right:100px;
padding-left:100px;
}

Simple change the values for each property to change the position of your widget content.

Once you’ve got the position right, you might want to style your widget depending on what you drag into this widget area.

Header Left Widget

Here’s a tutorial about how to add a header left widget in Genesis.

Reader Interactions

Comments

  1. Hi!

    I am running the Foodie theme, which doesn’t come with the header right widget. I followed the advice above and removed the functions code which unregistered the widget. The widget now shows in my available widgets, but when I put something in it, it doesn’t show.

    I have been playing around with this for days, but I cannot sort it out! I am ultimately trying to put a header ad (728px wide) in this place.

    Any idea what to do?

    Thanks!

    • I tested this locally and once you remove the PHP code which unregisters the header right widget, it will display once populated.

      Any reason you haven’t asked this question on the Foodie theme forum?

      • Hi Brad,

        I realised that I needed to reload my widget page – embarrassing! It is now displaying, but I am having real trouble positioning the header image/widget so they are inline. I have spent three days reading tutorials and fiddling around with the code, but to no avail. Very annoying!

        I didn’t know there was a Foodie theme forum. As far as I know, the only place you can ask for information about the Foodie theme is from the e-mail support of the designer, but they will only answer questions about how to set the site up like their demo and will not help with “customisation”. I had a look in Studiopress, but as I bought the theme from the designer’s website and not from Studiopress, it’s not showing up under My Themes.

        If there’s a better place to direct this question, I’d love to know! This issue is driving me insane now 🙂

          • Hi Brad,

            Thanks a lot for your help. I have been using Firebug and playing around with those figures. I have managed to align the image/widget somewhat, but the header area gets taller and taller as I adjust – is there a way to reduce that height, ideally not much taller than the logo + a little padding?

            Thanks!

          • You will need to learn how the CSS works in the header.

            This post focuses on positioning the header right widget and nothing else.

    • Its coded into Genesis so you can find the code in your functions file and remove it which looks like this:

      //* Remove the header right widget area
unregister_sidebar( 'header-right' );

      You may then need to add some CSS.

      Here’s some sample CSS you can modify:

      /* Widget Area
--------------------------------------------- */

.site-header .widget-area {
	float: right;
	text-align: right;
	width: 800px;
}

.header-image .site-header .widget-area {
	padding: 40px 0;
	padding: 4rem 0;
}

.site-header .search-form {
	float: right;
	margin-top: 24px;
	margin-top: 2.4rem;
}

      Media Queries

      /* Media Queries
--------------------------------------------- */
@media only screen and (max-width: 1139px) {

	.site-header .widget-area {
		width: 620px;
	}
}
@media only screen and (max-width: 1023px) {

	.site-header .widget-area {
		width: 100%;
	}
}

  3. HI Brad!

    I am using the eleven40 pro theme and I need to move the header right widget above the nav bar in the header. The header right widget is appearing below the nav bar and I want it above the nav bar. I can easily find a hook to move the nav bar around but I am not familiar with writing a hook to move the header right widget.
    Maybe I am over thinking this. Please help I am stuck!

    Thanks.

      • Thanks Brad,

        I ended up moving the nav to the header right widget and then made a new header widget which I hooked above the header right widget and was able to style it to the proper location.

        Why does the primary nav always appear above the widgets in the header? Is the other solution to rebuild the header?

        Great site!. I have been searching for a lot of help with genesis and wordpress, and your name always rises to the top.

        • Did you populate the header right widget with the custom menu widget?

          You can easily re-position either primary or secondary menu’s with 2 lines of PHP.

          Thanks for the positive feedback which really helps me stay motivated.

          • That’s correct. I populated the header right widget with the custom menu widget. I had tried using this line of code to move the primary menu below the right header widget. But no matter where i would hook it into it would always appear above any widgets in the header. 

            remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav' );

            Thanks again!

Leave a Reply