Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Witn

Recommended Posts

9 hours ago, TheArtisanStudio said:

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:

All Products /

Bags non-leather

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

 

Screenshot 2020-12-07 at 15.12.04.png

Try adding to Custom CSS

/* 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;
}

 

Link to comment
9 hours ago, TheArtisanStudio said:

Thank you for your reply. Unfortunately Squarespace is saying that there's a syntax error in the second line of your code above: "


div.nested-category-tree-wrapper {

Can you take screenshot all code in Custom CSS?

Link to comment
  • 4 weeks later...
On 1/15/2021 at 7:21 AM, galangster said:

Hi! Could someone help me with this as well? Our website: https://www.enjoysnacks.com/shop has the navigation categories on the side (which we like). On product pages like this one: https://www.enjoysnacks.com/shop/p/giftpacks/enjoy-gift-pack, we would like the category navigation on the top of each product page. Is there anyway to do this? Any help would be greatly appreciated! Thanks!

You can add a Text Block in Footer >> Add text links >> Then we can give the code to move it on the top of product page.

Link to comment
1 hour ago, galangster said:

Let me know if there is anything else I need to do! Thanks! 🙂

Add to Last Line in Code Injection Footer

<script>
  $(document).ready(function() { 
		$('div#block-3994033c75bb9362abb4').insertBefore('.ProductItem');
	});
</script>

 

Link to comment
On 12/8/2020 at 12:48 AM, tuanphan said:

Try adding to Custom CSS


/* 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;
}

 

Hi! I added this to my custom css, it has worked but there are formatting issues.

This is my main store page without the code:

1718497666_Screenshot2021-01-29at10_23_09.thumb.png.bcfa771910e581a7e6d96cf436e628e9.png

 

Main store page with the code:

215695270_Screenshot2021-01-29at10_27_07.thumb.png.eb79a5f812ae6bf4a95407f17bfb4e7a.png

 

category page with the code: 

1350803845_Screenshot2021-01-29at10_26_55.thumb.png.786a19a58f5eaa0f2008317c88012179.png

 

I like the original look, with lines under the navigation and in-between each individual category. Now the main store page has no lines at all, and on the category pages the navigation is under the line. Is there a way to maintain the original formatting? 

Link to comment
On 1/29/2021 at 3:34 AM, Environmental-Tea-48 said:

Hi! I added this to my custom css, it has worked but there are formatting issues.

This is my main store page without the code:

1718497666_Screenshot2021-01-29at10_23_09.thumb.png.bcfa771910e581a7e6d96cf436e628e9.png

 

Main store page with the code:

215695270_Screenshot2021-01-29at10_27_07.thumb.png.eb79a5f812ae6bf4a95407f17bfb4e7a.png

 

category page with the code: 

1350803845_Screenshot2021-01-29at10_26_55.thumb.png.786a19a58f5eaa0f2008317c88012179.png

 

I like the original look, with lines under the navigation and in-between each individual category. Now the main store page has no lines at all, and on the category pages the navigation is under the line. Is there a way to maintain the original formatting? 

try remove this code

nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}
Link to comment
  • 1 month later...

Hi @tuanphan

I have a similar issue. For some reason on mobile, once I click a category, for example, art prints, the category navigation disappears. Is there to a way to make sure the category menu remains on all shop pages ON MOBILE. Web version seems to work fine. Can you help?

Website is shanoncamillearts.com

Link to comment
  • 4 weeks later...
On 4/12/2021 at 6:15 PM, alexlazarciuc said:

Hey Guys,

I have the same issue, can someone help please?

My website is: https://www.fluffyheartsbandanas.com/

You can see the padding is not correct with new releases and the rest of nav items.

Can you advise? Thanks

Alex

Screenshot 2021-04-12 121157.png

Hi. Do you still need help?

Link to comment
  • 4 weeks later...
On 12/7/2020 at 7:48 PM, tuanphan said:

Try adding to Custom CSS


/* 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;
}

 

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 

 

 

Screenshot_20210511-181909.png

Screenshot_20210511-182032.png

Link to comment
  • 4 weeks later...

Hi, 

On my online store I have the categories appearing above the products (which i like) but i would like to add aditional spacing and text if possible to divide the store page into categories when the user scrolls down. Does anyone know how to do this? 

For example on the attached image I would like to separate to add a separator below the "Meukow" products and the "Blossom" products. With a title saying "Blossom".

 

image.thumb.png.181173e7ec5098e5c95def6009475595.png

Link to comment
  • 1 month later...
On 6/7/2021 at 9:09 PM, swoodhamscdg said:

Hi, 

On my online store I have the categories appearing above the products (which i like) but i would like to add aditional spacing and text if possible to divide the store page into categories when the user scrolls down. Does anyone know how to do this? 

For example on the attached image I would like to separate to add a separator below the "Meukow" products and the "Blossom" products. With a title saying "Blossom".

 

image.thumb.png.181173e7ec5098e5c95def6009475595.png

Hi. Do you still need help? If yes, can you share link to your site?

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...