Changing dropdown menu color on DAWN theme

Store Design
, , , , ,

Topic summary

Main issue: Make Dawn theme dropdown menus (desktop and mobile) solid white for readability; also change the country selector dropdown (currently blue) to white.

Proposed fixes:

  • Suggestion to add custom code in theme.liquid . (Specific code not provided in the post content, so effect is unclear.)
  • Implemented solution: Add CSS in base.css to set white backgrounds for menu elements:
    • .menu-drawer__navigation { background-color: white; }
    • .header__submenu .header__menu-item { background-color: white; }

Outcome:

  • The CSS change worked; dropdown menus now display with solid white backgrounds. Visual confirmation was provided via images showing the mobile menu and submenu dropdown results.

Remaining issues:

  • Small transparent bars still appear over the menu, likely due to earlier custom code; root cause not identified.
  • The country selector dropdown’s blue background was not explicitly addressed or confirmed fixed.

Status:

  • Partially resolved. Menu background issue is fixed; further troubleshooting is needed for the transparent bars and to align the country selector styling with the white theme.
Summarized with AI on January 1. AI used: gpt-5.
1

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

2

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

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

3

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.png
mobile menu.png1291×546 63.9 KB

submenu dropdown.png
submenu dropdown.png1357×591 891 KB

4

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