Full Width Sub Menu & Main Menu (mobile), change or add text

Forgot to add, but im sure youd figure but change the size of your window to a mobile display size, ive forced the responsivenesss of the site to start earlier.

Hi Andy,

i dont want a different menu for mobile, all I want is to change the text
where it says “Menu” to something else on the mobile display. And would
like ot add text to the main menu on mobile. I’m attaching images so you
get an idea.

https://www.dropbox.com/s/ffpux8xdg5kj6cs/Menu%20Help%20Mobile%20View.png?dl=0

Im aware this is not a feature, and could be possibly added later. But I
would like to know where I can make the chnges in the code?

Atik

Hi Elliot,

My apolagise if this sounds rude, but did you read my last message or look at the image link I sent? Im not asking to hide the text on the “Fullwidth Sub Menu” but change it.

I also would like to add text before or after the Main Menu Icon.

https://www.dropbox.com/s/ffpux8xdg5kj6cs/Menu%20Help%20Mobile%20View.png?dl=0

Any help will be appreciated.

Atik

Thank You Yigit,

Really Helpfull, I didn’t end up changing anything in the menu.php file as it makes a global change but it helped me figure out what I needed to do, so i’m supplying the CSS for anyone else that might have issues like this.

/* MOBILE MAIN MENU */
#advanced_menu_toggle {
width: 120px;
color: #7C6853;
transition: all 0.3s ease-out 0s
}

#advanced_menu_toggle:after {
content: ‘Menu’;
font-size: 18px;
position: relative;
top: -4px;
left: 10px;
color: #7C6853;
transition: all 0.3s ease-out 0s
}

#advanced_menu_toggle:hover:after{
color: #fff;
transition: all 0.3s ease-out 0s
}
/* MOBILE MAIN MENU END */

/*MOBILE FULL WIDTH SUB MENU */
.mobile_menu_toggle{
background-color: #81D8D0 !important;
color: #fff !important;
}

.mobile_menu_toggle:after{
content: ‘Menu’;
font-size: 18px;
position: relative;
top: -4px;
left: 5px;
color: #fff;
}

.mobile_menu_toggle:hover{
background-color: #fff!important;
color: #7C6853 !important;
}

.mobile_menu_toggle:hover:after{
color: #7C6853 !important;
}
/* MOBILE FULL WIDTH SUB MENU END */

If you need to change the content for the full width sub menu for inidividual pages add a version of the code below to the ‘Code Block’ of that page

<style>
.mobile_menu_toggle:after { content: “Custom Menu Text Here” !important; }
.</style>