Docs

[newskywebsites]

Hi there, I have an old school customer that doesn’t think people know what the “hamburger” menu indicates 🙂 I’ve seen sites where there is a button that says “MENU” on mobile instead of the hamburger menu. Is that possible with X?

Site: http://vitalgreen.newskywebsites.com/

Latest version of everything.

Thanks!
Dawn

[Prasant Rai]

Hello Dawn,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

[data-x-icon]:before, [class*="x-icon-"]:before {
    content: "Menu" !important;
    
}

[newskywebsites]

That worked really nice for changing the hamburger menu to the word “menu” but it also added the word “Menu” over my social media icons in the top bar. See video: http://screencast-o-matic.com/watch/cbVIIRQCUe

Hoping for a fix?

Thanks!!
Dawn

[Joao]

Hi Dawn,

This code instead:

.x-btn-navbar .x-icon-bars:before {
	content: "MENU";
}

Thanks

Joao

[Joao]

Hi Dawn,

This code instead:

.x-btn-navbar .x-icon-bars:before {
	content: "MENU";
}

Thanks

Joao

[newskywebsites]

Thank you! That worked! However, the text is in a clashing font with the site. Can it use the default font for the site site in the customizer? In this case, that’s google font Signika.

Thanks!!
Dawn

[Friech]

Yeah sure, please tweak Joao’s code a bit.

.x-btn-navbar .x-icon-bars:before {
	font-family: "Signika",sans-serif;
	content: "MENU";
}

Cheers!

[newskywebsites]

Thank you! That’s perfect!
Dawn

[newskywebsites]

I added some CSS to center the menu when it wraps, but I can’t figure out how to add padding between the logo and the MENU button on a phone. See screenshot.

Can you look at my CSS and tell me what I need to add/edit? THANKS!!

/* word menu instead of hamburger menu on mobile */
.x-btn-navbar .x-icon-bars:before {
font-family: “Signika”,sans-serif;
content: “MENU”;
}

@media (max-width: 700px) {
.x-btn-navbar, .x-btn-navbar.collapsed {
font-size: 15px;
width: 65px;
text-indent: 2px;
padding: 10px;
float: none !important;
clear: both;
margin: 20px auto;
}
}

[Joao]

Hi There,

Please add the following code to appereance > Customizer > Custom > CSS

@media (max-width: 769px) {
.x-brand {
    margin-bottom: 20px;
}}

Thanks

Joao

[newskywebsites]

OUTSTANDING SUPPORT!! Thanks so very much!!
Dawn

[Joao]

You are welcome 🙂 Thanks for the kind words.

Joao

[Author]

Posts