Jump to content

Want store category menu to appear the same on every category page - not disappear!

Recommended Posts

Site URL: https://www.angelabritton.co.uk

Hello! I'm just setting up my website on 7.1 - www.angelabritton.co.uk

I don't know what the theme was called, sorry!

It's not finished yet - so the password is Angela 

I have a simple category menu (centered) in my shop section showing abstracts | gifts | cards | other with a line separating it and the products. When you click into any category though, it disappears. I think this is silly as it needs to stay there for for the sake of aesthetics and usability (otherwise you have navigate back to the home page to get to the shop again). Confused as I'm coming from Shopify where this is just the norm.

Can anyone help is layman's terms? I'm not super CSS literate 🙂  Thanks!

 

Screenshot 2022-08-16 at 12.02.05.png

Screenshot 2022-08-16 at 12.02.15.png

Link to comment

Hi Angela!

Click on one of the categories, then click Edit and Edit Section in the top right. Scroll down in this window, and you'll see a "Categories Type" section where you can enable the Category Title & Breadcrumbs options. This is separate from the main store page options. When enabled, once you have navigated from the main store page, this then appears with: "All / abstracts" for example.

Hope this helps!

Link to comment
On 8/18/2022 at 4:56 PM, AngelaB said:

Hi Birdie, 

I do appreciate your answer, but actually doesn't actually work properly for the centered menu! No worries, I think I will speak to chat to see if anyone can help me. 

Have a lovely day. 

Try adding this to Design > Custom CSS

div.nested-category-tree-wrapper {
display: flex !important;
float: none !important;
min-width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
flex-direction: column !important;
display: flex;
}
.nested-category-tree-wrapper>ul {
width: 100% !important;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap !important;
}
.nested-category-tree-wrapper>ul li {
margin-left: 2vw;
}
nav.nested-category-breadcrumb {
display: none !important;
}
ul.nested-category-children {
display: none !important;
}
a.category-link.root {
    padding-bottom: 0 !important;
    padding-top: 6px !important;
}
/* fix first item space */
li.category-item:first-child a {
    padding-bottom: 0 !important;
}

image.thumb.png.0a558d0b3f07c12c812ba4f3109298a6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Wow, thank you tuanphan, that actually worked! I appreciate your help.

Can I ask - a couple of questions regarding it?

1) The menu look uncentered for some reason, is there are reason for this?

2) There seems to be a lag in loading time now for the shop page, is this because of the code?

2) can I put in spacers and an underline in this menu as before?  i.e.

Abstracts | Gifts | Cards | Other

Screenshot 2022-08-22 at 16.37.32.png

Link to comment
On 8/22/2022 at 10:39 PM, AngelaB said:

Wow, thank you tuanphan, that actually worked! I appreciate your help.

Can I ask - a couple of questions regarding it?

1) The menu look uncentered for some reason, is there are reason for this?

2) There seems to be a lag in loading time now for the shop page, is this because of the code?

2) can I put in spacers and an underline in this menu as before?  i.e.

Abstracts | Gifts | Cards | Other

Screenshot 2022-08-22 at 16.37.32.png

#1. Try this CSS under

li.category-item {
    margin-right: 1vw;
    margin-left: 1vw !important;
}

#2. You can remove code & test this

#3. Try this CSS

div.nested-category-tree-wrapper li:after {
    content: "|";
    display: inline-block;
    position: absolute;
    top: 5px;
    right: -1vw;
}

div.nested-category-tree-wrapper li {
    position: relative;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.