WP SITES

Log in

Position Header Right Widget In Genesis

—

by

Brad Dalton

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.

Comments

16 responses to “Position Header Right Widget In Genesis”

  1. Nancy Avatar
    Nancy

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      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?

      1. Nancy Avatar
        Nancy

        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 🙂

        1. Brad Dalton Avatar
          Brad Dalton

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

          [code]
          .site-header .widget-area {
          float: right;
          text-align: right;
          width: 720px;
          }

          .header-image .site-header .widget-area {
          padding: 20px 0;
          padding: 2rem 0;
          }
          [/code]

          1. Nancy Avatar
            Nancy

            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!

          2. Brad Dalton Avatar
            Brad Dalton

            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 Avatar
    Raquel

    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!

    1. Brad Dalton Avatar
      Brad Dalton

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

      [code]
      //* Remove the header right widget area
      unregister_sidebar( ‘header-right’ );
      [/code]

      You may then need to add some CSS.

      Here’s some sample CSS you can modify:

      [code]

      /* 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;
      }
      [/code]

      Media Queries
      [code]
      /* 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%;
      }
      }
      [/code]

      1. Raquel Avatar
        Raquel

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

  3. John Schuster Avatar
    John Schuster

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Hello John.

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

      1. John Schuster Avatar
        John Schuster

        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.

        1. Brad Dalton Avatar
          Brad Dalton

          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.

          1. John Schuster Avatar
            John Schuster

            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.
            [code]
            remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ );
            add_action( ‘genesis_header’, ‘genesis_do_nav’ );
            [/code]
            Thanks again!

          2. Brad Dalton Avatar
            Brad Dalton

            genesis_before_header should have worked

  4. Melissa Belanger Avatar
    Melissa Belanger

    Would this work (but centered) for mobile devices?

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.