WP SITES

Menu Logo Menu In Essence Pro

—

by

Brad Dalton

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

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

    3.  

    Step 2

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

    4.  

    Step 3

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

    5.  

    Step 4

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

    6.  

  6. # 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.

    7.  

    Step 6

Download Folder

Related Tutorials

2 responses to “Menu Logo Menu In Essence Pro”

  1. kiersten armstrong Avatar
    kiersten armstrong

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

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      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.

      Reply

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.

Tutorial Request

Includes code guarantee and coding support.

Subscribe

Monthly

$75

Access to 10 premium tutorials per month.

Tutorial Request

Includes code guarantee and coding support.

Subscribe

Yearly

$500

Access to 15 premium tutorials per month.

Monthly Tutorial Request

Includes code guarantee and priority coding support.

Subscribe