Space in Menu - Hover in white

Store Design

Topic summary

A user implemented a workaround to add spacing in their navigation bar by creating placeholder menu items (labeled with #). They successfully styled these three items to display in white but need help making them remain white on hover, including the underline effect.

Solution Provided:

  • Add custom CSS code to the theme.liquid file (before the closing tag)
  • The CSS targets specific navigation items using nth-child selectors (9th, 10th, and 11th items)
  • Applies white color (#fff) to both the link text and bottom border on hover state
  • Uses !important flags to ensure the styling overrides existing theme styles

Implementation Steps:

  1. Navigate to Online Store → Theme → Edit code
  2. Open theme.liquid file
  3. Insert the provided CSS styling code

The solution addresses both the hover text color and underline color issues for the placeholder menu items.

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

Hi

I have use da twerk in order to add space in my navigation bar - by creating # Menu

I have managed to make these 3 items color white

but how to make them white in ‘Hover’ and the underline as well

TBS2023_0-1727771062122.png
TBS2023_0-1727771062122.png1223×173 23.2 KB

https://the-body-shop-nordic.myshopify.com/

ubahdo

2

Hello @TBS2023

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.site-nav__item:nth-child(9):hover .site-nav__link--underline::after, .site-nav__item:nth-child(10):hover .site-nav__link--underline::after, .site-nav__item:nth-child(11):hover .site-nav__link--underline::after { border-bottom-color: #fff !important; } .site-nav__item:nth-child(9):hover .site-nav__link, .site-nav__item:nth-child(10):hover .site-nav__link, .site-nav__item:nth-child(11):hover .site-nav__link { color: #fff !important; }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

1 Like