How to change the navigation menu text color?

Store Design
,
1

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:

Screenshot 2025-01-06 at 10.59.09 PM.png
Screenshot 2025-01-06 at 10.59.09 PM.png678×360 31.5 KB

hover:

Screenshot 2025-01-06 at 10.59.19 PM.png
Screenshot 2025-01-06 at 10.59.19 PM.png890×378 41.9 KB

2

@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);}
3

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 tag

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

4

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;
}

ZestardTech_0-1737004156542.png
ZestardTech_0-1737004156542.png917×293 75.6 KB

Let me know if you need further assistance!

5

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;
}

image.png
image.png793×434 97.1 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

6

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

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!

7

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:

websensepro_0-1737014694257.png
websensepro_0-1737014694257.png1166×437 162 KB

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! :rocket: (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!

8

Thank you so much, it works!!!