Add Social Icons to right side of Menu Button in Essence Pro Genesis theme

By default, the Essence Pro Genesis Theme displays a full-screen overlay menu on click of the menu button. Do you want to add social icons next to this menu button to give better visibility to your social profile links? Here is how to add Facebook, Twitter, and Instagram icons to the theme header area.

Before and After

genesis social icons menu essence theme

PHP Snippet: Replace the menu function

In the WordPress Dashboard, go to Appearance -> Theme Editor page and open the header-functions.php file contained in the lib folder. Go to line no 66 and look for this function essence_header_right_menu() . Replace this code with the following code.

Make sure you modify the above code for two things. First, add your social profile URLs by replacing # in the code. Second, add custom title in place of ENTER YOUR TITLE in the code.

CSS Code: For better styling

To make social icons look good, add the following CSS code. In WordPress Dashboard, go to Appearance -> Customize and then paste this CSS code in the Additional CSS box.

 

Share this Tutorial

Leave a Comment