HOW TO SHOW UP CATEGORIES ON MOBILE

Site URL: https://celticfusiondesign.com/womens/capes-and-coats

Hello there!

I am trying to ensure that my categories are displayed in a stacked format on mobile devices, especially when a category page is selected.

The code I am currently using is:

/* Stacking shop categories and ensuring visibility on mobile */
@media screen and (max-width: 767px) {
  /* Ensuring the category navigation is visible and stacked correctly */
  .nested-category-tree-wrapper {
    display: flex !important;
    flex-wrap: wrap; /* Allow categories to wrap to the next line if needed */
    justify-content: center; /* Center align categories */
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    overflow-x: auto; /* Enable horizontal scrolling if categories overflow */
    padding-top: 15px; /* Space above the categories */
    box-sizing: border-box; /* Include padding in the element's total width */
  }
  
  /* Ensuring the category items are styled correctly */
  .nested-category-tree-wrapper ul {
    display: flex; /* Use flexbox for the list of categories */
    flex-wrap: wrap; /* Allow items to wrap */
    padding: 0;
    margin: 0;
    list-style: none; /* Remove default bullets */
    white-space: nowrap; /* Prevent text wrapping */
  }

  .nested-category-tree-wrapper ul li {
    margin: 5px; /* Add space between categories */
    flex: 1 0 auto; /* Allow items to grow and shrink as needed */
  }

  .nested-category-tree-wrapper ul li::after {
    content: ' |'; /* Separator */
    margin-left: 10px; /* Space between category name and separator */
  }

  .nested-category-tree-wrapper ul li:last-child::after {
    content: ''; /* Remove separator from the last item */
  }

  /* Ensure the product list displays properly */
  section.products.collection-content-wrapper.products-list {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack products vertically */
  }
}



…but it's not working. Can someone help? I didn’t save the code because it was too messy. Thanks!

Like this or?

@media screen and (max-width: 767px) {
  /* Ensuring the category navigation is visible and stacked correctly */
  .nested-category-tree-wrapper {
    display: flex !important;
    flex-wrap: wrap; /* Allow categories to wrap to the next line if needed */
    justify-content: center; /* Center align categories */
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    overflow-x: auto; /* Enable horizontal scrolling if categories overflow */
    padding-top: 15px; /* Space above the categories */
    box-sizing: border-box; /* Include padding in the element's total width */
  }
  
  /* Ensuring the category items are styled correctly */
  .nested-category-tree-wrapper ul {
    display: flex; /* Use flexbox for the list of categories */
    flex-wrap: wrap; /* Allow items to wrap */
    padding: 0;
    margin: 0;
    list-style: none; /* Remove default bullets */
    white-space: nowrap; /* Prevent text wrapping */
  }

  .nested-category-tree-wrapper ul li {
    margin: 0 10px !important; /* Add space between categories */
    flex: 1 0 auto; /* Allow items to grow and shrink as needed */
  }
.nested-category-tree-wrapper ul li a {
    margin: 0px !important;
    padding: 0px !important;
}
  .nested-category-tree-wrapper ul li:last-child::after {
    content: ''; /* Remove separator from the last item */
  }

  /* Ensure the product list displays properly */
  section.products.collection-content-wrapper.products-list {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack products vertically */
  }
}

3 hours ago, tuanphan said:

Like this or?

@media screen and (max-width: 767px) {
  /* Ensuring the category navigation is visible and stacked correctly */
  .nested-category-tree-wrapper {
    display: flex !important;
    flex-wrap: wrap; /* Allow categories to wrap to the next line if needed */
    justify-content: center; /* Center align categories */
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    overflow-x: auto; /* Enable horizontal scrolling if categories overflow */
    padding-top: 15px; /* Space above the categories */
    box-sizing: border-box; /* Include padding in the element's total width */
  }
  
  /* Ensuring the category items are styled correctly */
  .nested-category-tree-wrapper ul {
    display: flex; /* Use flexbox for the list of categories */
    flex-wrap: wrap; /* Allow items to wrap */
    padding: 0;
    margin: 0;
    list-style: none; /* Remove default bullets */
    white-space: nowrap; /* Prevent text wrapping */
  }

  .nested-category-tree-wrapper ul li {
    margin: 0 10px !important; /* Add space between categories */
    flex: 1 0 auto; /* Allow items to grow and shrink as needed */
  }
.nested-category-tree-wrapper ul li a {
    margin: 0px !important;
    padding: 0px !important;
}
  .nested-category-tree-wrapper ul li:last-child::after {
    content: ''; /* Remove separator from the last item */
  }

  /* Ensure the product list displays properly */
  section.products.collection-content-wrapper.products-list {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack products vertically */
  }
}

 

Sorry, is it possible to center it like this?

Try this CSS

@media screen and (max-width: 767px) {
  /* Ensuring the category navigation is visible and stacked correctly */
  .nested-category-tree-wrapper {
    display: flex !important;
    flex-wrap: wrap; /* Allow categories to wrap to the next line if needed */
    justify-content: center; /* Center align categories */
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    overflow-x: auto; /* Enable horizontal scrolling if categories overflow */
    padding-top: 15px; /* Space above the categories */
    box-sizing: border-box; /* Include padding in the element's total width */
  }
  
  /* Ensuring the category items are styled correctly */
  .nested-category-tree-wrapper ul {
    display: flex; /* Use flexbox for the list of categories */
    flex-wrap: wrap; /* Allow items to wrap */
    padding: 0;
    margin: 0;
    list-style: none; /* Remove default bullets */
    white-space: nowrap; /* Prevent text wrapping */
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .nested-category-tree-wrapper ul li {
    margin: 0 !important; /* Add space between categories */
    flex: 1 0 auto; /* Allow items to grow and shrink as needed */
  }
.nested-category-tree-wrapper ul li a {
    margin: 0px !important;
    padding: 0px !important;
  display: inline-block !important;
}
  .nested-category-tree-wrapper ul li:last-child::after {
    content: ''; /* Remove separator from the last item */
  }

  /* Ensure the product list displays properly */
  section.products.collection-content-wrapper.products-list {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack products vertically */
  }
}

9 hours ago, tuanphan said:

Try this CSS

@media screen and (max-width: 767px) {
  /* Ensuring the category navigation is visible and stacked correctly */
  .nested-category-tree-wrapper {
    display: flex !important;
    flex-wrap: wrap; /* Allow categories to wrap to the next line if needed */
    justify-content: center; /* Center align categories */
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    overflow-x: auto; /* Enable horizontal scrolling if categories overflow */
    padding-top: 15px; /* Space above the categories */
    box-sizing: border-box; /* Include padding in the element's total width */
  }
  
  /* Ensuring the category items are styled correctly */
  .nested-category-tree-wrapper ul {
    display: flex; /* Use flexbox for the list of categories */
    flex-wrap: wrap; /* Allow items to wrap */
    padding: 0;
    margin: 0;
    list-style: none; /* Remove default bullets */
    white-space: nowrap; /* Prevent text wrapping */
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .nested-category-tree-wrapper ul li {
    margin: 0 !important; /* Add space between categories */
    flex: 1 0 auto; /* Allow items to grow and shrink as needed */
  }
.nested-category-tree-wrapper ul li a {
    margin: 0px !important;
    padding: 0px !important;
  display: inline-block !important;
}
  .nested-category-tree-wrapper ul li:last-child::after {
    content: ''; /* Remove separator from the last item */
  }

  /* Ensure the product list displays properly */
  section.products.collection-content-wrapper.products-list {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack products vertically */
  }
}

 

"In all categories, the categories menu is appearing twice. Additionally, when one category is selected, the menu display format looks strange. I have read many forum posts about this issue, and it seems to be a difficult one to resolve.

On 9/13/2024 at 9:30 AM, tuanphan said:

Try remove the code & use this new code

@media screen and (max-width:767px) {
	h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper {
    display: flex;
    float: none !important;
    max-width: unset !important;
    min-width: unset !important;
    width: 100% !important;
    padding-left: 0 !important;
}
h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper ul {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}
    h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper ul li {
        margin-left: 10px;
        margin-right: 10px;
    }
	.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
		padding-top: 6px;
	}
}

 

that worked, at all products page is not stacked anymore but i dont mind, thanks!