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

Technical Q&A
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!

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

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!