Hey Shopify friends.
I’ve seen a small issue with my website - I had updated my banner to match my top search bar a few months ago which is great.
But noticed recently - when you tap on the main menu bar and the drop down box shows - the font is white and contrast the page nicely and you can see the menu options clearly.
But when scroll down the page and then click on the menu bar the font goes black and can’t see the menu options.
Does anyone know how to fix this please? I’ve attached photos of what I mean 
Please someone help - warmest regards DB
@vibehome
it can be look like this by adding below css code to your base.css file which is located in your theme files
Online Store > Edit Code > Theme Files > Assets > Base.css file
#menu-drawer {
background-color: #000 !important;
}
It sounds like the issue might be related to the CSS styling of the menu bar. Here’s a potential solution:
-
Identify the CSS Class or ID**: First, you’ll need to identify the CSS class or ID responsible for styling the menu bar and its dropdown items. You can do this by inspecting the elements using your browser’s developer tools.
-
Override the CSS**: Once you’ve identified the class or ID, you can override the CSS styling to ensure that the font color remains consistent regardless of whether the page is scrolled or not. You’ll want to make sure that the font color property is set to the desired color (likely white) for both states.
-
Apply the CSS Fix**: Depending on the specific CSS structure of your Shopify theme, you may need to add custom CSS code to your theme’s stylesheet. You can typically do this by accessing the “Edit HTML/CSS” section of your Shopify admin panel and locating the appropriate stylesheet file.
-
Test and Adjust**: After applying the CSS fix, make sure to test it thoroughly on different devices and browsers to ensure that the issue has been resolved successfully. You may need to tweak the CSS code further to achieve the desired result.
Here’s an example of the CSS code you might use to override the font color property:
/* Assuming ".menu-bar" is the class responsible for styling the menu bar */
.menu-bar .dropdown-menu {
color: white !important; /* Set font color to white */
}
Replace “.menu-bar” with the actual class or ID of your menu bar element.
Remember to save your changes and refresh your website to see the updates. If you’re not comfortable making these changes yourself, consider reaching out to a Shopify developer or support for assistance.
@vibehome Please follow below steps to change the color of menu drawer items. Let me know whether it is helpful for you.
- From admin, go to “Online stores” → “Themes”.
- Click action button from the current theme and select “Edit code”.
- Go to “base.css” file and paste the below code at the bottom of the file and save changes.
body:has(.scrolled-past-header) sticky-header #menu-drawer a,
body:has(.scrolled-past-header) sticky-header .menu-drawer__utility-links svg {
color: #ffffff !important;
}
Result will be like,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
Thank you @Vinsinfo I have done that after your kind support. Its now clear for customers 
Greatly appreciate your time and help 
