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

Stock category navigation on mobile devices


Jordan-FIG
Go to solution Solved by paul2009,

Question

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 post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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-

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

Posted Images

12 answers to this question

Recommended Posts

  • 0

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 1

@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;
}
}

 

Link to post
  • 0
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 post
  • 0
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 post
  • 0
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 post
  • 0
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 post
  • 0

@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 post
  • 0
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

Link to post
  • 0
On 4/19/2021 at 4:09 AM, tuanphan said:

I see no category here

image.thumb.png.b0dc68646bb8adc4a5d1f7113845ff5e.png

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

Link to post
  • 0
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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...