Menu text hamburger icon

[gversion]

Hello,

I would like to be able to add the text "MENU" next to the hamburger menu icon that is displayed on mobile devices.

I have tried the CSS below but the "MENU" text is not displayed on the same line as the icon.

<div class="responsive-menu-icon" style="
    float: right;
    width: 100%;
"><span class="float:left;">MENU</span></div>

Could someone please give me a hand?

Thank you,
Greg

[SavvyJackie]

Hi,
Check your stylesheet and see if you can find the .responsive-menu-icon::before selector and try adding the word MENU just before the hamburger icon code. In this example, we are using dashicons, if you are using font-awesome the hamburger code may be different.

.responsive-menu-icon::before  {
content: "MENU \f333";
}

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[gversion]

Hi,

Thanks for the reply. That was easier than I was expecting!

Any idea how I can control the font style of the word "MENU" without changing the hamburger menu icon?

Thanks again, really appreciate it.

Regards,
Greg

[SavvyJackie]

I am not sure, but I would think not without coding it manually in the responsive-menu.js file. You'd have to wrap that 'MENU' word in a separate SPAN tag to style it.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[gversion]

Ok, thanks. I will try and select it using jQuery. I will post my solution if I find one.

Regards,
Greg

[zomidaily]

Hi @SavvyJackie
Thanks for pointing out the location. I did add the word MENU, but it seems that the alignment is not same as the icon screenshot: http://prntscr.com/7owjbc Any idea how to correct it?

Regards,
Joseph

[Amol]

Hello,

Put the following code in your global.js file
$( '.nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu' ).addClass( 'responsive-menu' ).before('<div class="responsive-menu-icon"><span class="menu-text">Menu</span></div>');

add following code to your css
.menu-text {
color: #fff;
line-height: 1;
vertical-align: top;
margin-top: 3px;
margin-left: 5px;
display: inline-block;
}

I hope this solves your issue.

Warmest

---

What’s Beneath the Webface

[bvaneijden]

Kleverk, where can I find the global.js file? It seems not to be there for me.

I am using the Magazine Pro theme and in the "js" folder there is something called "responsive-menu.js". Is this the correct one?

[Amol]

Hello,

Responsive-Menu.js is different file.

Take backup of your website first before creating global.js file

Paste this code in that js file

$( ‘.nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu’ ).addClass( ‘responsive-menu’ ).before(‘<div class=”responsive-menu-icon”><span class=”menu-text”>Menu</span></div>’);

Hope it helps.

---

What’s Beneath the Webface

[Author]

Posts