Solved

White Translucent Background On Mobile Drop-down Menu

EpicQuest
Excursionist
19 0 4

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.jpgNormal BG.jpg

Store Website: https://epicquestperfumes.com/

Accepted Solution (1)

GabrielS
Shopify Partner
481 106 114

This is an 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.

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.

View solution in original post

Replies 6 (6)

GabrielS
Shopify Partner
481 106 114

This is an 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.

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
EpicQuest
Excursionist
19 0 4

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
Shopify Partner
481 106 114

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?

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
EpicQuest
Excursionist
19 0 4

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
Visitor
1 0 0

Hi Gabriel,

 

I was wondering how to do white translucent background instead?

 

Thank you

Uhrick
Shopify Partner
433 68 97

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

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution