Jump to content

Keep all categories in top bar navigation in view on each category page

Recommended Posts

On 4/16/2021 at 1:58 AM, ampddesigns said:

Hi @tuanphan So glad I stumbled upon this, thanks!

Was there ever a fix for mobile?

 

Here is the site:

https://kazoo-grape-t92x.squarespace.com/shop

Password: DailyMagicWholesale21

 

Also, is there a way to align "all products" with the rest of the items? Currently it is higher.

 

Currently on screen resizes this is what I see:

 

 

Screen Shot 2021-04-15 at 2.56.20 PM.png

Screen Shot 2021-04-15 at 2.56.11 PM.png

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div.nested-category-tree-wrapper ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/17/2021 at 5:36 AM, tuanphan said:

Add to Design > Custom CSS


@media screen and (max-width:767px) {
div.nested-category-tree-wrapper ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
}

 

Thank you so much!

 

In case it's helpful, I also used this to bring "all" in alignment:

 

.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
  padding-bottom:0px!important;
}

Link to comment
  • 3 weeks later...
On 4/19/2021 at 3:31 PM, ampddesigns said:

Thank you so much!

 

In case it's helpful, I also used this to bring "all" in alignment:

 

.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
  padding-bottom:0px!important;
}

Really helpul all these answers, it all works fine (couple of hickups)

Any help with the below would be great (i've used the code from tuanphan and ampddesigns )

Picture Below- How do I increase the space between the category bar and the products below? I want the bar to look like its on its own, rather than attached to the products.

1.thumb.JPG.f053a301a8dcb008ceaa0676320ed7f3.JPG

 

My other issue is this. When i use subcategories, the way it is displayed looks really awful. Is there anyway to make it look like a dropdown menu? Ideally I want all the categories to stay at the top on the same line, with the subcategories appearing below. The same happens on the mobile version too.

2.thumb.JPG.06cb0f809cdbeef28e0cb912193fa7e5.JPG

3.JPG.041c794e40fa2fb34e5a94c5dbae1fc2.JPG

 

And finally, how do I change the background color and text color?

 

Many thanks in advance

Edited by Luk_a1
Link to comment
On 5/10/2021 at 3:04 PM, Luk_a1 said:

Really helpul all these answers, it all works fine (couple of hickups)

Any help with the below would be great (i've used the code from tuanphan and ampddesigns )

Picture Below- How do I increase the space between the category bar and the products below? I want the bar to look like its on its own, rather than attached to the products.

1.thumb.JPG.f053a301a8dcb008ceaa0676320ed7f3.JPG

 

My other issue is this. When i use subcategories, the way it is displayed looks really awful. Is there anyway to make it look like a dropdown menu? Ideally I want all the categories to stay at the top on the same line, with the subcategories appearing below. The same happens on the mobile version too.

And finally, how do I change the background color and text color?

 

Many thanks in advance

Hi. Can you share site url? We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/11/2021 at 1:03 PM, alexlazarciuc said:

@creedon hey, sorry for late reply, the notifications email went into spam. The issue is still there, Navigate to the url -> click new collection -> you will see the list of those options will disappear 

Add this new code to Design > 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;
}
li.category-item:first-child a {
    padding-bottom: 0 !important;
}

image.thumb.png.9caa4d3bb117e3dc43265ac19df048f8.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
On 5/13/2021 at 5:11 PM, tuanphan said:

Add this new code to Design > 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;
}
li.category-item:first-child a {
    padding-bottom: 0 !important;
}

image.thumb.png.9caa4d3bb117e3dc43265ac19df048f8.png

I applied this code into my site, but you can see on mobile that the categories go onto multiple lines when viewing on mobile. Is there anyway to fix this so it's all on one line and you can drag across the screen or some other option?

https://stephenchowphotography.com/shop/taxis-trams

 

 

IMG_6525.jpg

Link to comment
On 9/19/2021 at 11:47 AM, sjcwallprints said:

I applied this code into my site, but you can see on mobile that the categories go onto multiple lines when viewing on mobile. Is there anyway to fix this so it's all on one line and you can drag across the screen or some other option?

https://stephenchowphotography.com/shop/taxis-trams

 

 

IMG_6525.jpg

Hi,

Don't remove above code.

Add this to Design > Custom CSS

/* Fix mobile category nav links */
@media screen and (max-width:767px) {
.nested-category-tree-wrapper>ul {
    flex-wrap: wrap;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...
On 9/4/2022 at 11:24 PM, Sam1010 said:

@tuanphan This was all very helpful to show categories on all pages. However, the vertical line's that separated each category are now gone...is there a code to get those back?

Yes. Possible. Can you share link to your site? We can adjust code for your case

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/4/2022 at 11:24 PM, Sam1010 said:

@tuanphan This was all very helpful to show categories on all pages. However, the vertical line's that separated each category are now gone...is there a code to get those back?

Do you still need this?

On 9/13/2022 at 8:34 AM, Sam1010 said:

@tuanphan http://www.samgraingerart.com/ how about now? Also, can you help with changing the color of the left and right arrow boxes when selecting an image and there are multiple. Right now it shows solid white box with a grey arrow. I'm looking for it to be transparent box and with a grey arrow...

I don't quite understand. Can you take a screenshot?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
19 hours ago, Sam1010 said:

@tuanphanscreenshot below. You'll see the white boxes with arrows to go left and right. They are blocking part of the picture which I dont want.

Screen Shot 2022-09-20 at 8.03.35 AM.png

Add to Design > Custom CSS

.pdp-carousel-controls.enabled>button {
    background-color: transparent !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/22/2022 at 1:21 AM, Sam1010 said:

@tuanphanThat worked, thank you! However it is now hard to see the grey arrows. How can I make those white?

I think you should change arrow icon + background, because if change arrow to white, I'm not sure it will be fine on other products.

What do you think?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 9 months later...
On 4/17/2021 at 4:36 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div.nested-category-tree-wrapper ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
}

 

This and the previous code worked perfectly, so thank you! Only thing I wonder is if there is a way to add something like a break between the categories. Something like a bullet point or a line. See picture below, they kind of look jumbled.

Link is:

www.thehometownhaunts.com

Screen Shot 2023-07-26 at 1.12.20 PM.png

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.