Replacing the Backlight mobile menu icon
Recently I was asked if there was a way of replacing the Backlight mobile menu icon (those three horizontal bars) with the word “Menu”. The icon is actually created with html span elements inside a div with the class of “nav__icon” (this can be seen using your browser’s inspector). At first I didn’t see an easy way of replacing that. Then I thought of jQuery. Using jQuery, this is actually pretty easy.
I did a search on “replace html with jQuery” and came up with this page.
I want to replace the div with the “nav__icon” class with text. This did the job:
Add this code via phplugins using the ttg_scripts hook.
You can then style it any way you need to by targeting label.page__toggle__trigger p in custom css.
The font for this is controlled in Masthead > Identity > Font-family. If you need a different font for the Menu button than that used by the masthead identity, then use custom css to change it.
Using this same technique, instead of replacing .nav__icon with the word menu, you could use a Font Awesome icon. Just drop in the code for the icon you want instead of <p>Menu</p>.
(note: this code is valid thru Backlight version 1.1.1)