Change menu color on mobile Launch theme

Hi there,

 

I've tried a couple of things from the forum to get the font color different but no luck just yet. Could anyone help me out?

 

Below is what it's looking like at the moment and I'd like to change the color into ff6c0e

 

https://urbanalley-handsanitizer.myshopify.com/

passw; urbanalley

 

thanks so much!

Screenshot 2020-05-02 at 17.07.33.png

0 Likes
dmwwebartisan
Shopify Partner
5803 1330 1703

Hi

add code assets/theme.scss.liquid bottom of the file

@media only screen and (max-width: 590px) {
.header-drawer .header-navigation-link  {color: #ff6c0e !important;}
}


Hope this will work for you.

 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
chong
Excursionist
32 1 3

Hi, sorry for late reply. If you want your menu to be white and menu text to be black. Add this code to the bottom of your theme.scss folder

@media only screen and (max-width: 768px) {
.header-drawer{
background-color: white
}

.header-drawer .header-navigation-link {
color: black;
}
.showing-drawer .header-cart-link {
color: black;
}
.showing-drawer .header {
background-color:white;
}

.icon-cross:before {
color: black;
}

}

 

 

After adding the bottom code to your theme.scss.liquid or theme.css.liquid , press ctrl + f and find .showing-drawer

scroll down till you find this code below

 .showing-drawer & {
height: 100vh;
overflow-y: auto;
background-color: rgba($dark-color, 0.98) !important;
}

replace with 

 .showing-drawer & {
height: 100vh;
overflow-y: auto;
background-color: white;
}

Luckily, if you did not edit any scss code, it should be on line 7808 and BAM, you just changed the color on mobile view.

 

For  a more indepth explanation on how to customize the colors

.header-drawer .header-navigation-link {
color: black;
}

 

this code here color:black changes your menu text color to black. If you want to insert a custom color, replace black with #FFFFFF for example, its a color code for white. I recommend you to search google E.G. search orange color code and paste it in there.

 

.showing-drawer .header-cart-link {
color: black;
}

 

this code here makes the main menu cart from white [original] to black. Likewise,

 

.icon-cross:before {
color: black;
}

 

turns exit menu cross from white [original] to black.

 

To edit menu color just edit the background-color for the two remaining code. The first can be found at the bottom of theme.scss script which u copied. The last one should be on line 7808.

.header-drawer{
background-color: white
}

 .showing-drawer & { 
height: 100vh;
overflow-y: auto;
background-color: white;
}

0 Likes