How to change the navigation menu text color?

[Puchi]

Hello! I am using the Studio theme, and my current menu text color in default state is white but it looks like it has some opacity on top of it, when hover, it has the underline and 100% opacity on the text. I am wondering how do I change the text style in the menu text for default state? 

Thank you so much.

The website address is https://littlepuchi.com/

pw:123456

Default:

hover:

[suyash1 · Accepted solution]

@Puchi please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

.header__menu-item {color: rgba(var(--color-foreground), 1);}

[Puchi]

Thank you so much, it works!!!

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
.header__submenu .header__menu-item {
  color: #fff !important;
}
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[ZestardTech]

Hello @Puchi,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

body .header__menu-item {
    color: #ffffff !important;
}

Let me know if you need further assistance!

[DaisyVo]

Hi @Puchi 

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

.header__menu-item {
    color: rgb(16, 57, 72) !important;
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[topnewyork]

Hi @Puchi 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.list-menu__item {
    color: black !important;
}
</style>

 If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!

Use our Big Bulk Discount app to boost your sales! (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[websensepro]

Hi @Puchi 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.header__submenu .header__menu-item {
    color: #ffff !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!