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.
Leave a Reply
You must be logged in to post a comment.