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

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


deme

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...
Posted (edited)
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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