How to Keep store navigation on category pages and not just main store page?

I actually figured it out... sorry.

On 1/27/2022 at 10:45 PM, Maldian said:

I actually figured it out... sorry.

How did you figure this out? I am having the same problem

On 10/5/2022 at 4:19 PM, Dunky said:

How did you figure this out? I am having the same problem

If you share link to your site, we can help easier

Greetings -  I'm working with the same alignment issue.

Have added code to custom CSS in order to keep categories menu on top of subsequent pages:

/* Show category nav links */
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;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}

But first item of category menu 'All Ages' is misaligned - slightly higher.  Can you help?

lobster-impala-satr.squarespace.com

 

11 hours ago, kelewis said:

Greetings -  I'm working with the same alignment issue.

Have added code to custom CSS in order to keep categories menu on top of subsequent pages:

/* Show category nav links */
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;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}

But first item of category menu 'All Ages' is misaligned - slightly higher.  Can you help?

lobster-impala-satr.squarespace.com

 

What is your site url? We can check problem easier

http://www.wardstreetstudio.com

On 1/18/2023 at 6:05 AM, kelewis said:

http://www.wardstreetstudio.com

 

Hi,

It looks like you figured it out?

Hello,

I am using same code as per below and everything is perfect for me in alignment and category navigation bar is visible in all categories:

/* Show category nav links */
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;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}
li.category-item:first-child a {
    padding-bottom: 0 !important;
}

But the question is does it possible to make category navigation bar also visible inside the selected product item?

Below is all categories in shop:

Below is inside the selected product item:

Site: https://www.ugnesstory.com/parduotuve/kaklo-papuosalai

Many thanks!

On 2/28/2023 at 8:12 PM, Mindzek said:

Hello,

 

I am using same code as per below and everything is perfect for me in alignment and category navigation bar is visible in all categories:

/* Show category nav links */
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;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}
li.category-item:first-child a {
    padding-bottom: 0 !important;
}

But the question is does it possible to make category navigation bar also visible inside the selected product item?

 

Below is all categories in shop:

Below is inside the selected product item:

 

Site: https://www.ugnesstory.com/parduotuve/kaklo-papuosalai

Many thanks!

Hi. yes possible. We will need to use script code to do it. CSS code can't solve it

And when you add new category, you will need to update new code

Do you still want to continue?

Hi there! 

I currently have my store with 5 different categories, but on the same page we can see all the different items listed. I would like to only display the categories, image provided, and have them associated with their own image, so that people can click on them and see all the items in that category rather than have everything on one page. 

Can someone please help? 🙂

On 3/15/2023 at 9:06 PM, LocoLuxury said:

Hi there! 

I currently have my store with 5 different categories, but on the same page we can see all the different items listed. I would like to only display the categories, image provided, and have them associated with their own image, so that people can click on them and see all the items in that category rather than have everything on one page. 

Can someone please help? 🙂

Can you share link to this page? We can check easier

(/config is url for site owner)

On 5/11/2021 at 11:29 PM, SarahLune said:

Hi ! I used your code and it's working on desktop very well,  but it doesn't seems to be working on mobile for my website.

Here's a picture of what the code does to my menu. I also attached a picture of what I used to have, but I wish to have the directory on all category's page.

A couple weeks ago, I also added a code to have a nested menu on mobile so maybe it's interfering with yours ? I tried removing it, but then the menu is on one line, and I don't like it this way. It's not very user friendly.

I hope I'm making sense. Thank you for your help !

Here's my shop link : https://www.sarahlalune.com/boutique-2 

 

 

Did you sort this? i am having the same problem where the navigation bar goes strange on mobile.

Hi, the categories in my store on mobile are cut off. Thoughts on how to display all the categories on mobile?

Site: dethreads.net

On 9/11/2023 at 8:31 AM, cinnamoncat said:

Hi, the categories in my store on mobile are cut off. Thoughts on how to display all the categories on mobile?

Site: dethreads.net

You can use some CSS code like this

@media screen and (max-width: 767px ) {
    .tweak-products-nested-category-type-sidebar .products.collection-content-wrapper .nested-category-children {
        display: flex !important;
    } 
}

Can anyone help I am having problems with alignment:

/* Show category nav links */
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;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}

On 2/19/2024 at 12:17 AM, Aweilding said:

Can anyone help I am having problems with alignment:

 

/* Show category nav links */
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;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}

 

  

Can you share link to this page?

Hello!

I'm having the same issue with the categories not being aligned:

https://contrabass-tetra-xb42.squarespace.com/

Password: schinnen

Also, is there a way to rename the all category to something else?

Thanks!

On 3/19/2024 at 4:50 PM, Baadjou said:

Hello!

 

I'm having the same issue with the categories not being aligned:

https://contrabass-tetra-xb42.squarespace.com/

Password: schinnen

 

Also, is there a way to rename the all category to something else?

Thanks!

The site is expired, you can access this link to extend it

https://contrabass-tetra-xb42.squarespace.com/config/extendtrial

Ah, perfect!

Thanks tuanphan. Should be accessible again!

On 4/1/2024 at 3:04 PM, tuanphan said:

The site is expired, you can access this link to extend it

https://contrabass-tetra-xb42.squarespace.com/config/extendtrial

password is incorrect now. Can you check it again?

I just tested it and the password should work!

https://contrabass-tetra-xb42.squarespace.com/shop

Password: schinnen