Change the Styling of a Single Item in the Header Nav Bar Menu

Store Design
,

Topic summary

A user wants to customize the styling (background and font color) of a single item in their header navigation dropdown menu using custom CSS.

Specific Request:

  • Target item: “Holiday Collection” under the “Shop” dropdown
  • Website: www.jacksongalaxy.com
  • Preferred method: Custom CSS tool in theme customizer

Solution Provided:
A CSS code snippet was shared targeting the first child element in the mega menu:

  • Uses #MegaMenu-Content-1 > ul > li:first-child selector
  • Sets background color to #dbd2f4
  • Sets text color to #fff
  • Includes !important flags to override existing styles
  • User can adjust the hex color values as needed

The solution appears straightforward and directly addresses the styling customization request.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

How can I change the styling (i.e. background color and font color) of one item on my top nav bar dropdown? I prefer to do this within the “custom css” tool for this section within the theme customizer.

The item I’d like to change is “Holiday Collection” under the “Shop” header dropdown. Website is www.jacksongalaxy.com.

Thanks!

2

Hi @AlexMets , add the below code to your theme’s CSS file.

#MegaMenu-Content-1 > ul > li:first-child {
    background: #dbd2f4 !important;
}
#MegaMenu-Content-1 > ul > li:first-child a {
    color: #fff !important;
}

You can change the background color(#dbd2f4) and text color (#fff) per your need.