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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Styling Header Right Widget in Genesis

A common problem Genesis theme users want to solve is styling the header right widget.

This widget is included in most Genesis child themes.

Here’s the selector which you target to style with CSS code:

#header .widget-area {}

First step is to change the line height

#header .widget-area {
line-height: 1.6875;
}

Then we’ll change the font size:

#header .widget-area {
line-height: 1.6875;
font-size: 16px;    
font-size: 1rem;
}

We’ll use both rem and pixel values for the font size:

Based on these values, 1 rem = 16 pixels

Now we’ll change the font style by adding a font family:

#header .widget-area {
line-height: 1.6875;
font-family: Georgia, Times Roman, Arial;
font-size: 16px;    
font-size: 1rem;
}

Now lets change the font color:

#header .widget-area {
line-height: 1.6875;
font-family: Georgia, Times Roman, Arial;
font-size: 16px;    
font-size: 1rem;
color: #fff;
}

Lets now position our widget to float to the right of the header area:

#header .widget-area {
float: right;
width: 25%;
line-height: 1.6875;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;    
font-size: 1rem;
color: #fff;
}

You can easily float your widget to the left and change the width to another percentage by editing the values for the properties in your CSS declarations.

If you want to use a special font, you can easily install Google fonts and use the font family name in the values above. Example:

font-family: Lustria;

If you need to remove the header right widget area altogether, paste this code into your child themes functions.php file:

unregister_sidebar( 'header-right' );

Styling Other Widgets

You can also create a custom widget anywhere there’s a Genesis hook and style it using the code above.

Reader Interactions

Comments

  1. Georgia says

    October 6, 2013 at 4:38 pm

    Thank you so much for your help!! I only have one problem…..my widget will only show up UNDERNEATH my logo, it’s positioned in the right location – I just can’t get it to align with the menu and logo. Any advice?

    Log in to Reply
    • Brad Dalton says

      October 7, 2013 at 2:02 am

      Hello Georgia

      What did you put inside the widget?

      You may need to increase the widget width and reduce the width of the title area.

      All this can be done in your child themes style.css file and varies depending on the theme you’re using.

      Log in to Reply
  2. Tom Dolan says

    January 24, 2013 at 2:41 am

    Hi Brad,
    I see that when you talk about installing a google font, you actually show 3 fonts: Georgia, Times Roman, Ariel. Does having 3 fonts give me a choice of using any of them? Do I install the 3 separately?

    Log in to Reply
    • Brad Dalton says

      January 24, 2013 at 4:21 am

      Hi Tom. No these fonts are already supported by all browsers so there’s no need to install them.

      You can use them or install Google fonts and then add the Google fonts to your font family properties in any of your themes CSS declarations.

      Log in to Reply
      • Tom Dolan says

        January 24, 2013 at 4:27 am

        Thanx for that info Brad. I saw a similar listing of three fonts at the top of the css style sheet of my new theme editor, and wondered what that meant.

        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