How can I hide the first child item from the main menu?

Technical Q&A

Topic summary

A user wants to hide the first child item in their Shopify main menu dropdown while keeping it functional for breadcrumb navigation purposes.

Attempted Solutions:

  • Initial CSS suggestion targeting #main-menu .menu-item:first-child { display: none; } didn’t work
  • Alternative CSS using .site-nav li:nth-child(2) .site-nav__dropdown { display: !important none; } also failed to hide the dropdown

Current Status:
The dropdown item remains visible despite multiple CSS attempts (screenshots provided showing the persistent menu item at www.kidsonthewise.com).

The user suspects the solution may require modifying the site-nav.liquid file that generates the dropdown menu, but lacks coding knowledge to implement this change. The issue remains unresolved and the user is seeking additional help.

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

Hi everybody! I would like to create a first child main menu item in order to create a breadcrumb path on my collection page without showing that item as dropdown in my main menu. Thank you!

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
#main-menu .menu-item:first-child {
display: none;
}
3

Thanks for your quick reply, I added your css but the child is still there.

4

Here a screenshot

shopify_community.jpg
shopify_community.jpg1796×156 41.3 KB

1 Like
5

Hello There,

Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.

6

www.kidsonthewise.com

7

Hello there,

What do you want to remove, can you please share the screenshot?

ZestardTech_0-1682403993276.png
ZestardTech_0-1682403993276.png1918×690 218 KB

8

Please add this CSS code in your theme.css file

.site-nav li:nth-child(2).site-nav__dropdown { display: none !important; }
9

Thanks, but the dropdown is still there.

10

Here is a screenshot to clarify.

shopify_community2.jpg
shopify_community2.jpg1920×657 137 KB

11

Hello everybody! It appears to me that I have to change the code in site-nav.liquid that generates the dropdown menu. Can anybody help out, I don’t know a thing about coding. Thanks again!