White Translucent Background On Mobile Drop-down Menu

Store Design
1

Hi!

I am having issues with my header drop-down menu showing a white, translucent background. The problem is, my text is white and very difficult to read when this drop-down is selected. Is there a way I can make it black or at least darker, so that the text is more legible?

White BG.jpg
White BG.jpg562×718 60.6 KB

Normal BG.jpg
Normal BG.jpg538×695 81.5 KB

Store Website: https://epicquestperfumes.com/

2

Hello,

You can do that through custom CSS. Assuming your current website, a possible solution to have the background of the dropdown black on mobile phones is the below:

@media (max-width:768px) {
.menu-drawer__navigation-container {
  background: black;
}
}

Or, if you want a semi-transparent background, use the below reference:

@media (max-width:768px) {
.menu-drawer__navigation-container {
background: rgba(0,0,0,0.5);
}
}

Adding the code at the end of your CSS file should reflect the changes on the website.

3

This definitely solved my problem, but has now created a new problem. On all my other perfume pages, when you scroll down, the background turns completely white. Is there a way to only change the drop-down menu? Thanks for your help!

4

Good evening, EpicQuest.

Yes, there is a way. Go to Online Store > Themes > Click on the ‘Actions’ button > Edit Code

Search for the file with the name of ‘component-menu-drawer.css’ and, at the end of it, add the code:

.menu-drawer__menu-item {
    color: blue;
}

.menu-drawer__menu-item--active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
    color: red;
}

PS: Where it says ‘color: blue’, replace ‘blue’, with the color you want the menu items to be, and where it says ‘color: red’, replace ‘red’ with the color you want the highlighted menu item to be.

Hope this helps

5

I have did a quick test loading other products and couldn’t replicate this issue. Can you share the link of a product that is not working as expected?

Are you sure that this specific code is causing the issue? If you remove the newly added code, is this issue addressed?

6

Thank you both! Something residual was causing the issue on my phone because everyone I asked to load on their phone, it worked fine. I think my saved cache was causing the issue. Not sure why, though. This definitely solved my problem. Thank you, again!

7

Hi Gabriel,

I was wondering how to do white translucent background instead?

Thank you