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:
$(“label.page__toggle__trigger .nav__icon”).replaceWith(“<p>Menu</p>”);
Add this code via phplugins using the ttg_scripts hook.
function ttg_scripts( $style, $path ) {
echo ' <script>$("label.page__toggle__trigger .nav__icon").replaceWith("</p>
<p>
</p>
<p>Menu</p>
<p>
</p>
<p>");</script>
';
}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: the above code is valid thru Backlight version 1.1.1)
Pangolin update
This code works for Backlight 1.2.x – Backlight 3.x
<!-- Replace the mobile menu icon with the word "Menu"-->
<script>$(".page__toggle__buttons label ul").replaceWith("<p>Menu</p>");</script>And style using this selector: .page__toggle__buttons label p
Backlight 2/3 update
Use the same script. The format for phplugins is different however.
Important: start with the phplugins-pangolin-sample.php file found in the /backlight/custom/phplugins/ folder.
The only difference in the function is right at the beginning.
Use: function scripts() {
instead of function ttg_scripts($style, $path) {
