Replacing the Backlight mobile menu icon

Replaced 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:

$(“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>Menu</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: this code is valid thru Backlight version 1.1.1)

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.3
Pages module 1.2.3
Cart Add-on 4.1.5
Client Response Add-on 7.1.2
Theater Add-on 1.2.4
WordPress Add-on 1.2.3
Publisher 3.2.2

CE4 Versions

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.9
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts