How To Change Default Genesis Responsive Menu Icons

This solution enables you to remove the default dashicons used to open & close the mobile menu and replace them with symbols, text or HTML Symbol Entities.

In this example, we dequeue dashicons for use on the frontend when logged out and replace them with pure text for the hamburger icon ☰ and the close icon x using pure CSS.

However, you can use also use this code with Dashicons enqueued as it includes the code to work either way as well as for logged in and logged out users.

Demo Video

Shows the new HTML symbols displaying before the genesis responsive menu.

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

Installation Steps

There’s 1 to 2 steps depending on whether you want to stop loading dashicons for logged out users.

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

 


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

 

Download Folder

Optional – Remove Dashicons Code

You will also find code like this wp_enqueue_style( 'dashicons' ); which loads dashicons on line 82 in the Genesis Sample themes functions file which you can remove also.