Jump to content

Create drop down menu for store product categories

Go to solution Solved by paul2009,

Recommended Posts

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! 

Screenshot 2023-05-27 at 16.01.25.png

Screenshot 2023-05-27 at 16.17.30.png

Link to comment
  • Replies 8
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
27 minutes ago, aina said:

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. 

You can create the manual method that you describe by adding a folder to your navigation and then adding some links (to each category) within the folder. However, please bear in mind that the folder nav isn't a great user experience on mobile devices. 

If you want to remove the other category selectors, you can hide them with some custom CSS.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

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! 

Screenshot 2023-05-28 at 13.57.36.png

Link to comment

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
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  ⬇️

Edited by paul2009
added quotes

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

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.

 

Screenshot 2023-05-29 at 08.06.42.png

Link to comment

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.

Screenshot2023-05-29at08_06_42.png.dc59f16245dd3f0b628b6fcc09043771.png

Link to comment
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.

image.gif.1aaffe313de983cb369454b2842b80db.gif

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.