Change mobile navigation colour

Solved
Highlighted
Tourist
10 0 2
Hi, I am using the supply theme.
Store is 1stchoiceraw.com and password is whiase
I have been trying to dig into the code all night and I’m giving up before I break it. As you can see when u click the navigation bar on mobile the background colour is red, the same as my header. How can I change it to be white, whilst keeping the header colour as red?

Thank you
0 Likes
Highlighted

Hello @devcg123,

Do you want like below screenshot

2020-02-11_13-00.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
10 0 2
Yes please! But with black text
0 Likes
Highlighted

@devcg123,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

#navBar {
	background-color: #fff;
}
#MobileNav .mobile-nav a {
	color: #000;
}
#MobileNav .mobile-nav--button::before {
	color: #000;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
10 0 2

That worked but now my navigation menu at the top also changed to white

0 Likes
Highlighted
Tourist
10 0 2

@devcg123 wrote:

That worked but now my navigation menu at the top also changed to white


for desktop

0 Likes
Highlighted

Success.

@devcg123,

Remove above code

Please add below css code

@media only screen and (max-width: 768px) {

#navBar {
	background-color: #fff;
}
#MobileNav .mobile-nav a {
	color: #000;
}
#MobileNav .mobile-nav--button::before {
	color: #000;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted

Success.

@devcg123,

Please add below code

@media only screen and (max-width: 768px) {
.mobile-nav--link {
	color: #000 !important;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like