• 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

Menu Logo Menu In Essence Pro

This solution enables you to modify the default Essence Pro site header elements to display a menu logo menu like this :

Menu Logo Menu Essence Pro

Centers either the site title or custom logo between the primary ( left ) and secondary ( right ) menus.

Note : The solution is written for newer versions of the Essence Pro theme which use Gutenberg. If you’re using an older version of the theme, this tutorial offers a different way to split your menus before and after your site title or header image.

Demo Video

Shows a split menu left and right in the Essence Pro child theme by StudioPress. Renames the primary and secondary menus to left and right displaying them either side of the site title or custom logo.

On smaller screens, combines both menus into the responsive toggle menu.

Installation Steps

There’s 6 steps :

  1. # Modify the code between lines 235 – 242 in functions.php like this
  2.  
    Step 1

  3. # In config > theme-supports.php lines 48 & 49, modify the PHP code like this :
  4.  

    Step 2

  5. # Line 22 in config > responsive-menus.php, add the class for the secondary menu like this
  6.  

    Step 3

  7. # Copy & paste the CSS from the style.css file to the end of your Essence Pro themes style sheet and clear caching.
  8.  

    Step 4

  9. # Create 2 new menus named left & right and assign 3 menu items to each menu like this :
  10.  

  11. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your Essence Pro themes functions file.
  12.  

    Step 6

Download Folder

Related Tutorials

  • Essence Pro Logo Menu Search Perfectly Inline
  • Essence Pro Menu Logo Menu & Full Page Hero Image
  • Menu Logo Menu Using CSS Grid In Parallax Pro
  • Menu Logo Menu In Genesis Sample Themes Header
  • Menu Logo Menu For Twenty Nineteen Theme

Custom Logo Essence Pro Theme Gutenberg Nav Menu

Reader Interactions

Comments

  1. kiersten armstrong says

    June 19, 2020 at 2:18 pm

    The files in the folder I downloaded for this tutorial are not the files for this tutorial. Thanks.

    Log in to Reply
    • Brad Dalton says

      June 19, 2020 at 2:56 pm

      I tested the code in the download folder and it works exactly as seen in the demo video. I sent you the child theme with the code installed.

      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.