Stock category navigation on mobile devices

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.

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

Hi @paul2009

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

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

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

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

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?

Anyone? @tuanphan @paul2009?

@HAM Do you still neeed help on this?

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

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.

@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

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

I see no category here

On 4/19/2021 at 4:09 AM, tuanphan said:

I see no category here

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

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

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

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

site: mistoa.mx

Hi @paul2009and @tuanphan

I'm having some issues with categories on mobile.

This is the way my categories display:

And this is the way I want them to display:

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

Thanks!

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  ⬇️

Thank you so much for taking a look, @paul2009

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

Thank you!!

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  ⬇️

Thanks a lot for your help, @paul2009