This solution enables you to modify the default Essence Pro site header elements to display a menu logo menu like this :
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 :
- # Modify the code between lines 235 – 242 in functions.php like this
- # In config > theme-supports.php lines 48 & 49, modify the PHP code like this :
- # Line 22 in config > responsive-menus.php, add the class for the secondary menu like this
- # Copy & paste the CSS from the style.css file to the end of your Essence Pro themes style sheet and clear caching.
- # Create 2 new menus named left & right and assign 3 menu items to each menu like this :
- # 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.
The files in the folder I downloaded for this tutorial are not the files for this tutorial. Thanks.
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.