Create drop down menu for store product categories

Hi there! 

I want to create a drop down menu from 'Shop' with all the product categories I have and remove this list that appears in the middle of the page. How can I do it? My inspiration is the other screenshot attached below. 

Thank you! 

Hi @paul2009, 

Thank you so much! I've created the folder and linked categories already. Now I would like to

1. Removed the listed categories with that custom CSS you mention. 

2. Create more space at the bottom of the drop-down menu as I feel there's not enough padding between 'Underwear & Swimwear' and the end of the menu (as shown in the attached image)

3. Remove the underlining of the 'All' (which is the store's category name) and the square that appears around 'Shop' when I click on it. I used some custom CSS I found from another user that wanted the underlinings under menu items to disappear but for some reason it deactivated the underlininings but this square now appears. 

Let me know, thank you! 

Please provide a working link to the site.  If required, How to Post a Forum Question provides guidance on how to provide a link.

Yes, of course: https://am-pm-store.com and the code is: AMPM2023

On 5/28/2023 at 1:47 PM, aina said:

Now I would like to
1. Removed the listed categories with that custom CSS you mention. 

You can hide the category selector (on both desktop and mobile) by adding this to Design > Custom CSS:

/* Hide Product Category Selector */
.products.collection-content-wrapper .nested-category-children {
  display: none;
}

On 5/28/2023 at 1:47 PM, aina said:

2. Create more space at the bottom of the drop-down menu as I feel there's not enough padding between 'Underwear & Swimwear' and the end of the menu

Regarding additional space on the dropdown folder, you can add some additional padding with this (adjust value as necessary):

.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding-bottom: 1em;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

That's perfect, thank you! It worked! What about this? 

17 hours ago, aina said:

3. Remove the underlining of the 'All' (which is the store's category name) and the square that appears around 'Shop' when I click on it. I used some custom CSS I found from another user that wanted the underlinings under menu items to disappear but for some reason it deactivated the underlininings but this square now appears.

Hi @paul2009! How can I remove the underlining of the 'All' (which is the store's category name) and the square that appears around 'Shop' when I click on it? I used some custom CSS I found from another user that wanted the underlinings under menu items to disappear. Still, for some reason, it deactivated the underlinings, but this square now appears.

21 minutes ago, aina said:

How can I remove the underlining of the 'All'...and the square that appears around 'Shop' when I click on it?

I used some custom CSS I found from another user...but this square now appears.

I am not seeing those issues when I check the site (see below).

However, if you are experiencing an issue after adding custom CSS then I recommend that you remove it to see if this solves the issue.