WP SITES

Log in

Add Header Right Widget & Full Width Menu In Genesis Sample Theme

—

by

Brad Dalton

The code in this download folder adds the header right widget area back to the Genesis Sample child theme and also repositions the primary menu after the header as well as making it full width in desktops like this :

The download folder also contains code to change the width the responsive menu kicks in from 960px width to 660px.

Note : If using version 3.4.1, change the width back to 960px, See the comments for more details.

Demo Video

Shows the primary menu repositioned to the after header hook and displayed full width on desktops.

Adds back the header right widget area.

Installation Steps

There’s 2 steps :

  1. # Remove or comment out the PHP code in functions.php on lines 135, 146 & 147 as seen in the image named functions.png located inside the download folder . If using version 3.4.1, the code is located on lines 200, 215 & 216,

    2.  
    Step 1

  2. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear all types of caching.

    3.  
    Step 2

If you want to add a button in the header right widget area, add this HTML in Custom HTML widget in the Header Right widget area.

<a class="button" href="http://example.com">Schedule Service Now 800-123-4567</a>

You can also go to config > theme-supports and change the name of the primary menu on line 39.

Genesis Primary Nav Menu Name

Download Folder

Comments

2 responses to “Add Header Right Widget & Full Width Menu In Genesis Sample Theme”

  1. Tim Baggaley Avatar
    Tim Baggaley

    Hi Brad,
    I’ve just tried this on a brand new version of Genesis Sample but something is not quite right with the responsive breakpoint. My Primary Nav disappears at a wider point to the responsive menu appearing. You can see my installation at: https://timbaggaley.co.uk/my-genesis/

    I don’t know if this is significant but the content in the Genesis Sample child functions.php has changed as the line numbers in your instructions no longer match up. I got the theme here: https://www.studiopress.com/genesis-sample/

    Thanks, Tim

    1. Brad Dalton Avatar
      Brad Dalton

      Works in 3.4.0. Version 3.4.1 has changed so the CSS will need modification for use in that version. Change line 6 in style.css in the download folder from this

      [code]
      @media only screen and (min-width: 660px) {
      [/code]

      to this :

      [code]
      @media only screen and (min-width: 960px) {
      [/code]

      I have also updated the installation steps to work with version 3.4.1.

Leave a Reply

Join 5000+ Followers

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