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

WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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. Nancy says

    September 10, 2014 at 5:35 pm

    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!

    Log in to Reply
    • Brad Dalton says

      September 10, 2014 at 6:42 pm

      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?

      Log in to Reply
      • Nancy says

        September 10, 2014 at 10:19 pm

        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 🙂

        Log in to Reply
        • Brad Dalton says

          September 10, 2014 at 10:26 pm

          All you need to do is use Firebug or Chromes browser to find the CSS and adjust the margins/padding etc.

          .site-header .widget-area {
          	float: right;
          	text-align: right;
          	width: 720px;
          }
          
          .header-image .site-header .widget-area {
          	padding: 20px 0;
          	padding: 2rem 0;
          }
          Log in to Reply
          • Nancy says

            September 10, 2014 at 10:51 pm

            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!

          • Brad Dalton says

            September 11, 2014 at 9:38 am

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

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

  2. Raquel says

    June 11, 2014 at 12:33 pm

    Hello, I am using a theme (Foodie) that does not have the header widget. Do you know how I can add this to my site? Thanks!

    Log in to Reply
    • Brad Dalton says

      June 11, 2014 at 12:57 pm

      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%;
      	}
      }
      Log in to Reply
      • Raquel says

        June 19, 2014 at 9:49 pm

        Just made my may back here, and thanks! It took a bit more finagling, but I got it. Thanks for the help!

        Log in to Reply
  3. John Schuster says

    May 29, 2014 at 3:56 am

    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.

    Log in to Reply
    • Brad Dalton says

      May 29, 2014 at 6:51 am

      Hello John.

      Why move it? Why not simply hook in a new widget and float it to the left or right?

      Log in to Reply
      • John Schuster says

        May 29, 2014 at 8:51 am

        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.

        Log in to Reply
        • Brad Dalton says

          May 29, 2014 at 9:48 am

          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.

          Log in to Reply
          • John Schuster says

            May 29, 2014 at 3:37 pm

            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!

          • Brad Dalton says

            May 29, 2014 at 3:38 pm

            genesis_before_header should have worked

  4. Melissa Belanger says

    November 25, 2013 at 9:59 am

    Would this work (but centered) for mobile devices?

    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