Add SVG Icons To Custom Nav Menu In Genesis

This code enables you to add simple SVG icons to a custom nav menu named Social in any Genesis child theme.

The code is written to detect the social network from the URL you add to a custom menu link. It then loads the SVG icon based on the social media link.

Demo Video

Shows you how to add SVG icons for your social media accounts to a custom Genesis nav menu.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme.

Installation Steps

There’s 4 – 5 steps :

1. # Upload the files named class-genesis-svg-icons.php & icon-functions.php to your child theme folder like this :

 


2. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.

 


3. # Copy & paste the CSS from the style.css file to the end of your child themes style.css file and clear caching.

 


4. # Create a new menu named Social and add custom links for each social site.

 

Step 5 – This step is only needed if using a newer version of a Genesis child theme which includes a config > theme-supports.php file. If your child theme does include this file, make sure you add a additional line for your social menu like what you see in the following screenshot :

Then you won’t need to include the line in functions.php for add-theme-support located on line 10.

Download Folder

Position

By default, the genesis_do_social_nav function located on line 12 of functions.php hooks the social menu to the genesis_footer hook. Swap out genesis_footer to any other Genesis hook to change the position in your theme.