Jump to content

Stock category navigation on mobile devices

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.cboothandson.co.uk/

Hello

I'm hoping someone can help me with this issue.


I want to insert some CSS that will stack the different 'category navigation' links at the top of a product page on top of one another when viewing a product page on mobile devices.


At the moment customers have to scroll along the 'category navigation bar' to find the category they are looking for. There is no indicator for the customer either, so unless they know this is how this site works they will miss a number of the categories.
I have attached a screenshot below of how I would like them to appear on mobile devices - or something similar.


Thank you in advance.

Capture.JPG

Link to comment
  • Solution

Try something like this in Design > Custom CSS:

@media only screen and (max-width: 640px) {
  .products.collection-content-wrapper .nested-category-children {
    flex-wrap: wrap;
    overflow-x: hidden;
    justify-content: center;
  }
  .products.collection-content-wrapper .nested-category-title {
    text-align: center;
  }
}

1946425749_Screenshot2021-01-20at15_09_38.thumb.png.f516b5d199118c6315bd00037ae1a14e.png

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
24 minutes ago, paul2009 said:

Try something like this in Design > Custom CSS:


@media only screen and (max-width: 640px) {
  .products.collection-content-wrapper .nested-category-children {
    flex-wrap: wrap;
    overflow-x: hidden;
    justify-content: center;
  }
  .products.collection-content-wrapper .nested-category-title {
    text-align: center;
  }
}

1946425749_Screenshot2021-01-20at15_09_38.thumb.png.f516b5d199118c6315bd00037ae1a14e.png

Hi @paul2009

Thank you for this, it worked perfect! Top man 😄

Link to comment
  • 2 months later...
On 1/20/2021 at 3:10 PM, paul2009 said:

Try something like this in Design > Custom CSS:


@media only screen and (max-width: 640px) {
  .products.collection-content-wrapper .nested-category-children {
    flex-wrap: wrap;
    overflow-x: hidden;
    justify-content: center;
  }
  .products.collection-content-wrapper .nested-category-title {
    text-align: center;
  }
}

1946425749_Screenshot2021-01-20at15_09_38.thumb.png.f516b5d199118c6315bd00037ae1a14e.png

Hi @paul2009 this worked really great however when I click on one of the categories via mobile then they all disappear again in the sub category.

Is there any way to change this so category titles are visible at all times?

website is https://hamtheillustrator.com

Link to comment

@HAM Try adding this to Design > Custom CSS (Dont remove Paul code)

@media screen and (max-width:767px) {
.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: unset !important;
    max-width: 100% !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
2 minutes ago, tuanphan said:

@HAM Try adding this to Design > Custom CSS (Dont remove Paul code)


@media screen and (max-width:767px) {
.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: unset !important;
    max-width: 100% !important;
}
}

 

Hey thanks @tuanphan this sorta worked - only issue is I now have two duplicated category menu's stacked on top of each other. Anyway to keep it so we only have Paul's menu's visible on every page?

Link to comment
  • 2 weeks later...
On 1/20/2021 at 3:10 PM, paul2009 said:

Try something like this in Design > Custom CSS:


@media only screen and (max-width: 640px) {
  .products.collection-content-wrapper .nested-category-children {
    flex-wrap: wrap;
    overflow-x: hidden;
    justify-content: center;
  }
  .products.collection-content-wrapper .nested-category-title {
    text-align: center;
  }
}

1946425749_Screenshot2021-01-20at15_09_38.thumb.png.f516b5d199118c6315bd00037ae1a14e.png

This solution worked great for me! So happy I tracked this solution down!

I also added this line of code to reduce the space before the categories:
    padding-top: 10px;

So it reads:

//mobile categories list

@media only screen and (max-width: 640px) {
  .products.collection-content-wrapper .nested-category-children {
    flex-wrap: wrap;
    overflow-x: hidden;
    justify-content: left;
    padding-top: 10px;
  }
  .products.collection-content-wrapper .nested-category-title {
    text-align: left;
  }


//mobile categories list end

You can change 'left' to 'center' to center the text on the mobile view too.

Screenshot 2021-04-14 at 16.19.16.png

Link to comment

@tuanphan @paul2009 same issue as HAM here. I want the category nav to appear on all the category pages but when I add @tuanphan's code, it duplicates the nav and it also appears as a sidebar style instead of all the category names in one line. (I'm talking about the mobile version specifically). Any way we can keep paul's code just as it is but on every category page?

url: https://www.eniwill.com/esp

Screen Shot 2021-04-16 at 10.12.48 AM.png

Link to comment
On 4/16/2021 at 10:13 PM, erkprk said:

@tuanphan @paul2009 same issue as HAM here. I want the category nav to appear on all the category pages but when I add @tuanphan's code, it duplicates the nav and it also appears as a sidebar style instead of all the category names in one line. (I'm talking about the mobile version specifically). Any way we can keep paul's code just as it is but on every category page?

url: https://www.eniwill.com/esp

Screen Shot 2021-04-16 at 10.12.48 AM.png

I see no category here

image.thumb.png.b0dc68646bb8adc4a5d1f7113845ff5e.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
34 minutes ago, erkprk said:

The link should be /esp (not esp/salud). The categories disappear when you click on one of the categories.

esp/salud when you clicking on salud link in left sidebar category

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
On 4/21/2021 at 12:33 PM, tuanphan said:

esp/salud when you clicking on salud link in left sidebar category

@tuanphan Would you be able to show me the code for the stacking of categories on mobile but for a video page at all please? www.igroomhub.com.au/microbites

 

Edited by anna_
Link to comment
On 12/18/2022 at 5:58 AM, anna_ said:

@tuanphan Would you be able to show me the code for the stacking of categories on mobile but for a video page at all please? www.igroomhub.com.au/microbites

 

See this

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
On 1/6/2023 at 10:17 PM, Begona said:

The code provided by @paul2009 is not working (probably because of some other code), so I would appreciate any help.

I can see that you have two errors elsewhere in your code injections. Some sections of code include additional brackets that are not required and are therefore causing errors. These errors prevent the other code from running. Take a look at the two sections of code that start with:

if($(window).width() >= 768) {

If you correct (or remove) these sections of code, other code should function 🙂

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
1 hour ago, Begona said:

I removed the code you suggested, but the categories are still stacked. Do you have another idea of what might be interfering?

There is other CSS (above the new CSS) that is targeting the same elements (for example .nested-category-tree-wrapper) and forcing them to stack. Because you have used "!important" in these settings, they override all other settings, which is why the new CSS doesn't make any difference 🙂

As an aside, and for the benefit of anyone else reading this, adding !important is rarely a good idea. I see a number of posts in the forum that treat the !important tag like it is a secret weapon that solves all your custom CSS problems, but it really isn't! If custom CSS isn't working as expected, it's much better to find out why than to add !important. I hope this is helpful to someone in a similar situation.

Did this help? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.