Menu Logo Menu Using CSS Grid In Newer Versions of Genesis Sample Theme

This tutorial adds a custom left and right menu that work with your custom logo and display inline using CSS grid.

If you’re using a new version of the Genesis Sample child theme which includes a config > theme-supports.php file rather than a menu.php file used in older versions, then this is the right solution for you. Here’s what it produces :

Menu Logo Menu

Otherwise, see the links to related posts at the end of this tutorial which provide solutions that work with older versions of the Sample theme for Genesis.

Demo Video

Shows the left and right menu with the custom logo in the center on desktop screens and both menus added to the responsive drop down menu on smaller screens below 960px width.

Tested using Genesis Sample theme version 3.4 & 3.4.1 however will work in any version that includes a theme-supports.php file.

Installation Steps

  1. # Remove or comment out the PHP code around line 147 in functions.php ( and 212 in newer versions ) which adds the primary menu to the genesis_header hook.
  2.  

  3. # Copy & paste the PHP code from the functions.php file to the end of your Genesis Sample themes functions file.
  4.  

  5. # Upload the theme-supports.php file to your Genesis Sample themes config folder replacing the default file of the same name or edit the code using the theme-supports.php file as a guide.
  6.  

  7. # Upload the responsive-menus.php file to your Genesis Sample themes config folder replacing the default file of the same name or edit the code using the responsive-menus.php file as a guide.
  8.  

  9. # Create 2 new menus named left and right
  10.  

  11. # Copy & paste the CSS from the style.css file to the end of your Genesis Sample themes style sheet and clear caching.
  12.  

Versions 3.4.1 & Newer

Note : If using Genesis Sample theme version 3.4.1 or newer, use the CSS from the style-2.css file instead of the style.css file.

Download Folder

Related Tutorials


Comments

2 responses to “Menu Logo Menu Using CSS Grid In Newer Versions of Genesis Sample Theme”

  1. Jeff Dashley Avatar
    Jeff Dashley

    Are you able to do the logo overhang on this version with it being grid-based?

    1. Yes, please link to your live site.

Leave a Reply

Join 5000+ Followers

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