White Translucent Background On Mobile Drop-down Menu

[EpicQuest]

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?

Store Website: https://epicquestperfumes.com/

[GabrielS · Accepted solution]

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.

[EpicQuest]

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!

[GabrielS]

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?

[EpicQuest]

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!

[FS000]

Hi Gabriel,

I was wondering how to do white translucent background instead?

Thank you

[Uhrick]

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