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

Site URL: https://impala-nectarine-4s9h.squarespace.com/config/design

Hi, 

I have created multiple stores within my site for different styles of product and then put categories within each store. When I go onto the main page of my store, there is a menu linking to all the different categories of products, but when you go onto the page of a category, the navigation to all the other categories dissappears, is it possible to keep this navigation on all category pages and not just the main store page?

Not sure what you mean. With the Bedford template, each product collection page (which might be what you mean by a store) shows the categories within that. See for example https://www.phelpsrefinishing.com/fuji-spray-guns

So on that site you provided for example, if you click into a product section such as Turbines, you can navigate between "All" and "Turbine" on either page, but on my site, once you click a chosen category from the "All page", the navigation is lost if that makes any sense ?

Can you share access password?

Password1 is the password! If you go onto one of the subsections and navigate to each part of that specific store, you will be able to see that the navigation is lost and you would have to go back to the main store page to navigate to other sections. 

Thanks!

On a seperate note, is it possible to add categories to a folder so that there is a drop down for section on the header navigation?

14 hours ago, Witn said:

So on that site you provided for example, if you click into a product section such as Turbines, you can navigate between "All" and "Turbine" on either page, but on my site, once you click a chosen category from the "All page", the navigation is lost if that makes any sense ?

Add to Home > Design > Custom CSS

.nested-category-tree-wrapper {
    display: flex !important;
}

Thank you very much, this worked! Do you know if its possible to have it on the top bar rather than sidebar?

On 11/19/2020 at 5:54 AM, tuanphan said:

 

Add to Home > Design > Custom CSS

.nested-category-tree-wrapper {
    display: flex !important;
}

 

I am very interested in this also. I have four store pages, I call them "Collections:" they all have unique products listed which are different in design to the other pages or "Collections:" the issue I am having is that when you are on one store "Collection: Attack-the-Block" for example. There is no navigation in the side bar to access the other store pages "Collection: Park Brewing". I Have created images at the bottom of the page, and top of the page previously to provide links to access the other store pages "collections:" and all the store pages are accessible in the drop down menu in the navigation.

I would like the store pages to be included above my categories in the side navigation. so that it would be structured like this. 

On 11/19/2020 at 5:54 AM, tuanphan said:

 

Add to Home > Design > Custom CSS

.nested-category-tree-wrapper {
    display: flex !important;
}

 

How to do you nest this above the products on mobile. So that the nested categories don't push the products over to the right. but rather come before the products in order and nest above. 

store page: https://www.parkbrewing.company/products-attack-the-block

access: "password"

Just now, Park_Brewing_Company said:

How to do you nest this above the products on mobile. So that the nested categories don't push the products over to the right. but rather come before the products in order and nest above. 

 

store page: https://www.parkbrewing.company/products-attack-the-block

access: "password"

 

 

NVM mind, changed float to inherit in this code.

.nested-category-tree-wrapper {
    display: flex !important;
}
.products.collection-content-wrapper .nested-category-tree-wrapper {
    float: inherit;
    min-width: 220px;
    max-width: 300px;
    margin-right: 40px;
      margin-bottom: 15px;
}

Hi there, 

I’m also having this problem. Wondering if anybody can help 🙃

@tuanphan the suggested code is working. However it displays as a side bar.

@Park_Brewing_Company this update also works but the display is stacked to the top.

I’d like to keep the styling of the category title, just have them appear at the top of each category page. 

Thanks in advance   ✌️

34 minutes ago, CASKATE said:

Hi there, 

I’m also having this problem. Wondering if anybody can help 🙃

@tuanphan the suggested code is working. However it displays as a side bar.

@Park_Brewing_Company this update also works but the display is stacked to the top.

I’d like to keep the styling of the category title, just have them appear at the top of each category page. 

Thanks in advance   ✌️

 

This sets it to the top for mobile only. this is what I have. sorry, never copied this part of the code.

@media screen and (max-width: 640px) {

.tweak-products-nested-category-type-sidebar .products.collection-content-wrapper .nested-category-children {

    display: none !important;

  } }

.products.collection-content-wrapper .nested-category-tree-wrapper>ul {

    display: none !important;

}

34 minutes ago, CASKATE said:

Site name: https://viola-seahorse-l65k.squarespace.com/config/design

Password: RosRosRos

 

 

you need to send a link to the actually website, which isn't /config/ that is the url to login in and edit, not the public url

https://viola-seahorse-l65k.squarespace.com/shop

Sorry about that

redirects me to this url, https://viola-seahorse-l65k.squarespace.com/config/?frameUrl=%2Fshop

not sure what the issue is, but the code I posted will nest the sidebar on mobile, and you can get it to position at top only on mobile. 

this is the full code and how I have mine structured.

//NEST-CATEGORY-MOBILE-HIDE-CATEGORY///
@media screen and (max-width: 640px) {
.tweak-products-nested-category-type-sidebar .products.collection-content-wrapper .nested-category-children {
    display: none !important;
  } }
  
.nested-category-tree-wrapper {
    display: flex !important;
}
@media screen and (max-width: 640px) {
.products.collection-content-wrapper .nested-category-tree-wrapper {
    float: inherit;
    min-width: 220px;
    max-width: 300px;
      margin-top: 30px;  
     margin-right: 40px;
      margin-bottom: 15px;
  } }

.products.collection-content-wrapper .nested-category-tree-wrapper { 
     margin-right: 20px;
  }
 

Okay I see. 

Thanks @Park_Brewing_Company

Its actually desktop my issue is. I’m looking to have something similar to this:

https://kordalstudio.com/collections/fw20-1st-release

1 minute ago, CASKATE said:

Okay I see. 

Thanks @Park_Brewing_Company

 

Its actually desktop my issue is.

whats the issue? how do you have your settings, or format set on the store page. 

Yes styling is set up etc. 

My issue is the categories just display on the main shop page. I’d like for these category titles to display on all of the category pages like a sub nav I guess. 

This code by @tuanphan does that, but it displays to the left side. 

.nested-category-tree-wrapper {
    display: flex !important;
}

On 11/23/2020 at 1:31 AM, CASKATE said:

Yes styling is set up etc. 

My issue is the categories just display on the main shop page. I’d like for these category titles to display on all of the category pages like a sub nav I guess. 

This code by @tuanphan does that, but it displays to the left side. 

.nested-category-tree-wrapper {
    display: flex !important;
}

 

 

Can you share site url?

https://viola-seahorse-l65k.squarespace.com/shop

Password RosRosRos

I have the same problem. It would be great to find a solution! Thanks.

Add to Home > Design > Custom CSS

.nested-category-tree-wrapper {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
}
section.products.collection-content-wrapper.products-list {
    display: flex;
    flex-direction: column;
}
.products.collection-content-wrapper .nested-category-tree-wrapper>ul {
    display: flex;
    justify-content: space-between;
    width: 50%;
    margin: 0 auto;
}

I have the same problem: need the whole list of categories to appear on category pages not just the main shop page. Despite copying the CSS code nothing seems to have changed?

Website is: https://www.theartisanstudio.uk/onlineshop

Category page example: https://www.theartisanstudio.uk/onlineshop/bags-non-leather

Instead of:

Bags non-leather

I would like to display the enclosed partial screenshot (like the main shop page).