How can I change the dropdown menu font color on mobile frontpage?

Store Design
1

Hey guys,

only on the frontpage of the mobile version the dropdown menu has a white background and the font color is also white due to the header font color.

I want the font color of the dropdown menu to be black while the header font color stays white. And only on the frontpage and mobile version.

Can somebody help me please?

https://0r58hjaemnw60kxk-69711397132.shopifypreview.com

Thank you

2

Hi @domo2 ,

Try this one. Sorry about it I change the font of the desktop and forgot the mobile. I remember your other post.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
@media only screen and (max-width: 989px){
    nav.menu-drawer__navigation a {
    color: black !important;
}
}

Result:

Ribe_Dagandara_0-1689774769561.png
Ribe_Dagandara_0-1689774769561.png582×415 68 KB

I hope it help.

3

Thank you. I did it exactly like you said in the base.css but I didn’t work..

4

@domo2

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (max-width: 749px){
    nav.menu-drawer__navigation a {
    color: black !important;
}
}
5

Really dont know what I’m doing wrong but it doesnt work

6

@domo2

The closing bracket missing please find this code in the base.css

.localization-form__select:focus {
    outline: transparent solid 1px;
  }

Rplace to

.localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

after adding my code

@media screen and (max-width: 749px){
    nav.menu-drawer__navigation a {
    color: black !important;
}
}
7

Please check following screenshot

PUBLIC SERVICE STORE – Public.jpg
PUBLIC SERVICE STORE – Public.jpg1594×777 120 KB

8

It finally worked, thank you very much!!!

9

One more question. Can you explain me how I change the color of the selecting size button on the product page? Thank you!

10

Can you try to put this code in the custom css in customize theme?

Go to online store > click theme you like to edit > click customize > header > find the Custom css on the bottom. Like this one.

Ribe_Dagandara_0-1689782140480.png
Ribe_Dagandara_0-1689782140480.png393×503 13.4 KB

then save.

11

thanks, I already got the solution