• 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

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

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

  3. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear all types of caching.
  4.  
    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

CSS Grid Columns Nav Menu

Reader Interactions

Comments

  1. Tim Baggaley says

    January 18, 2022 at 10:02 pm

    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

    Log in to Reply
    • Brad Dalton says

      January 19, 2022 at 1:17 am

      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

      @media only screen and (min-width: 660px) {

      to this :

      @media only screen and (min-width: 960px) {

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

      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
 

Loading Comments...
 

You must be logged in to post a comment.