How can I change the color of menu items on my website?

Store Design

Topic summary

Goal: Change the color (blue) of the first two navigation menu items—“Starter kits” and “Why buy a jellyfish aquarium?”—on petjellyfishus.com.

Attempts and guidance:

  • Suggested adding CSS in theme files (base.css) to style all menu items: .list-menu__item { color: blue; }. Screenshots were shared to show where to edit.
  • More specific CSS using nth-child selectors targeting the 1st and 2nd items with .header__menu-item and !important. Another variant set background-color on the list items and advised editing header.liquid.
  • A suggestion to inject code in theme.liquid before was posted but the code block was empty.

Latest proposal:

  • Use attribute selectors that target the exact links by href, added to the store’s CSS file:
    • a.header__menu-item…[href=“/pages/why-buy-a-jellyfish-aquarium”] { color: blue; }
    • a.header__menu-item…[href=“/collections/starter-kits”] { color: blue; }
  • A preview image of the expected result was provided. Images/screenshots were shared for guidance but are not essential to understand the approach.

Status: The requester reports previous codes did not work and asked for paid help. No confirmation that the latest solution resolved the issue; discussion appears ongoing.

Summarized with AI on January 12. AI used: gpt-5.
1

Hello,

I would need to change my first 2 menu items to different color (blue), or at least THIS ONE

How can I do that please? I wrote different similar topics but on my theme it does not work, I can not find it anywhere in ASSETS.CSS or THEME.LIQUID

My web is petjellyfishus.com

Could you help please?

Regards

Adam

2

Hi @Adam890 , can you share a screenshot what first two items you mean?

3

Hi, @Adam890

please send me page url

4

Hi @Adam890 ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about How To Highlite Shopify Menu Item?, let’s try this solution:

Online Store ->Theme ->Edit code
Assets ->Base.css

.list-menu__item{
color: blue;
}

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

5

Hello everyone,

my url is https://petjellyfishus.com/

And I want to highlight this 2 :

Starter kits

Why buy a jellyfish aquarium?

6

PageFlyTheodor_0-1699957835165.png
PageFlyTheodor_0-1699957835165.png1346×728 154 KB

7

And where exactly should I insert this code please? This file is very big, a lot of datas here

.list-menu__item{
color: blue;
}

8

PageFlyTheodor_0-1699958048551.png
PageFlyTheodor_0-1699958048551.png1892×937 198 KB

PageFlyTheodor_1-1699958093335.png
PageFlyTheodor_1-1699958093335.png1906×937 82.2 KB

please, follow guide

9

Go to base.css and add the following at the end :

.list-menu li:nth-child(1) .header__menu-item {
    color: blue !important;
}

.list-menu li:nth-child(2) .header__menu-item {
    color: blue !important;
}
10

I´ve added

.list-menu li:nth-child(1) .header__menu-item {
color: blue !important;
}

.list-menu li:nth-child(2) .header__menu-item {
color: blue !important;
}

On the end of base.css but no change on web

11 
ul.list-menu.list-menu--inline >li:nth-child(2) {
background-color: blue !important;
}

ul.list-menu.list-menu--inline >li:nth-child(1) {
background-color: blue !important;
}

Go customize > edited code > header.liquid and past this code

12

Try to add this code instead;

.list-menu li:nth-child(1) .header__menu-item,
.list-menu li:nth-child(2) .header__menu-item {
    color: blue !important;
}
13

I tried all of codes but nothing is working, if someone wants to help me for money let me know on my email jellyfishdesign@seznam.cz

14

Hi @Adam890

You can add this code to your theme.liquid file, before tag
15

Hello @Adam890 ,

As per my understanding you are looking to change the colour of the first two menu items in your navigation menu.

Please add the below mentioned code at the end of your store’ .css file (base.css/style.css/theme.css)

a.header__menu-item.list-menu__item.link.link--text.focus-inset[href="/pages/why-buy-a-jellyfish-aquarium"]{ color: blue; } a.header__menu-item.list-menu__item.link.link--text.focus-inset[href="/collections/starter-kits"]{ color: blue; }

=> After adding this code, output will look like this https://prnt.sc/U0YbFDum5EIr

I hope the solution helps you.

Please let me know if you need any assistance.

Thank you.

16

I’m really sorry. Has your problem been resolved yet?