Solved

changing dropdown menu color on DAWN theme

mgrp
Tourist
15 0 2

Hi everyone, would appreciate some help to change the background color on my dropdown menu for both desktop and mobile, its currently like a blurry transparent and I need it to be solid (white) so the text can be seen without being obstructed by the background.  Website is https://d9423d-93.myshopify.com/ thanks in advance 

 

also the country selector dropdown is a blue color and I don't know why, so having that be white would be preferred as well to match

Accepted Solution (1)

websensepro
Shopify Partner
1014 139 147

This is an accepted solution.

Hello @mgrp ,

 

Go to online store > themes > Edit code > Find base.css file

Add to the given code at the bottom of the file base.css 

 

.menu-drawer__navigation {
 
    background-color: white;
}
.header__submenu .header__menu-item {
   
    background-color: white;
}

save changes.

 

Result mobile menu.pngsubmenu dropdown.png

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 3 (3)

AnneLuo
Shopify Partner
253 49 54

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code to the head tag

<style>
  .menu-drawer__navigation, .header__inline-menu .global-settings-popup {
    background: #fff !important;
  }
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email me

websensepro
Shopify Partner
1014 139 147

This is an accepted solution.

Hello @mgrp ,

 

Go to online store > themes > Edit code > Find base.css file

Add to the given code at the bottom of the file base.css 

 

.menu-drawer__navigation {
 
    background-color: white;
}
.header__submenu .header__menu-item {
   
    background-color: white;
}

save changes.

 

Result mobile menu.pngsubmenu dropdown.png

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
mgrp
Tourist
15 0 2

THANK YOU!!!! worked perfectly, I think I must've added some code to hide something because you see those little transparent bars still on the menu, I don't know why its doing that and I'm baffled as to what I did lol