Shop Navigation: Slider to Drop Down

Site URL: https://www.shopmaisaguam.com/shop

Any workarounds or code to change the default navigation on my shop page from it being laid out on top to a drop-down style on mobile view? On desktop it looks fine because the screen is wide an all product categories are laid out nicely but on mobile you have to swipe left to see the other categories and a lot of people don't know this feature leaving them to have to scroll through the entire product page to find the items they're looking for. 

Add to Home > Design > Custom CSS. It will improve a bit

@media screen and (max-width:767px) {
.products.collection-content-wrapper .category-filter-list {
    flex-wrap: wrap;
}
.products.collection-content-wrapper .category-filter-container {
    height: auto;
}
}

@tuanphan You are a godsend to every novice Squarespace site owner!

I attached a screenshot of how it looks below with the code. Anyway to get it to look... cleaner and less scattered? 

On 5/28/2020 at 5:34 PM, maisaguam said:

@tuanphan You are a godsend to every novice Squarespace site owner!

I attached a screenshot of how it looks below with the code. Anyway to get it to look... cleaner and less scattered? 

Can you describe your desired layout?

Hi! I am looking to make my shop categories on mobile a dropdown menu instead of a horizontal left scrolling list. This is only for Mobile not desktop view. Let me know if theres a custom CSS for this. 

Thank you!

24 minutes ago, hboss22 said:

Hi! I am looking to make my shop categories on mobile a dropdown menu instead of a horizontal left scrolling list. This is only for Mobile not desktop view. Let me know if theres a custom CSS for this. 

Thank you!

 

Try adding to Home > Settings > Advanced > Code Injection > Header

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    var urlCat = window.location.href.split(".com/")[1];
    if (urlCat == "store") {
      var catItem = $('a.nested-category-breadcrumb-link');
      var itemTag = $(catItem).html();
      var catDrop = "<select name='Categories' id='categories' class='catDrop'><option value='All'>All</option>";
      if (itemTag !== undefined) {
        catItem.each(function(i) {
          var fixLoc = $(this).html().trim().replace(/\s+/g, '-').replace(/&/g, '').replace('amp;', '').replace('--', '-').replace(/'/g,'').toLowerCase();
          catDrop = catDrop + '<option value=' + fixLoc + '>' + $(this).html() + '</option>';
          i++;
        });
        catDrop = catDrop + "</select>";
        $(catDrop).insertAfter($('.nested-category-title'));
      }
      if (urlCat !== undefined) {
        var fixCat = urlCat.replace(/\%27/g, "'")
        $(".catDrop").val("All");
      }
      $(".catDrop").change(function() {
        if ($(this).val() == "All") {
          window.location = "/store/";
        } else {
          window.location = "/store/" + $(this).val();
        }
      });
    }
  });
</script>
<style>
  .collection-5f36dfec3a07a2182b139d23 .nested-category-children {
    display: none !important;
  }

  .catDrop {
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-left: 50%;
    transform: translateX(-50%);
  }
</style>

Codey by @rwp

If it doesn't work, can you share link to shop page, we can check easier.

3 minutes ago, tuanphan said:

Try adding to Home > Settings > Advanced > Code Injection > Header

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    var urlCat = window.location.href.split(".com/")[1];
    if (urlCat == "store") {
      var catItem = $('a.nested-category-breadcrumb-link');
      var itemTag = $(catItem).html();
      var catDrop = "<select name='Categories' id='categories' class='catDrop'><option value='All'>All</option>";
      if (itemTag !== undefined) {
        catItem.each(function(i) {
          var fixLoc = $(this).html().trim().replace(/\s+/g, '-').replace(/&/g, '').replace('amp;', '').replace('--', '-').replace(/'/g,'').toLowerCase();
          catDrop = catDrop + '<option value=' + fixLoc + '>' + $(this).html() + '</option>';
          i++;
        });
        catDrop = catDrop + "</select>";
        $(catDrop).insertAfter($('.nested-category-title'));
      }
      if (urlCat !== undefined) {
        var fixCat = urlCat.replace(/\%27/g, "'")
        $(".catDrop").val("All");
      }
      $(".catDrop").change(function() {
        if ($(this).val() == "All") {
          window.location = "/store/";
        } else {
          window.location = "/store/" + $(this).val();
        }
      });
    }
  });
</script>
<style>
  .collection-5f36dfec3a07a2182b139d23 .nested-category-children {
    display: none !important;
  }

  .catDrop {
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-left: 50%;
    transform: translateX(-50%);
  }
</style>

Codey by @rwp

If it doesn't work, can you share link to shop page, we can check easier.

It didn't appear to work! Here's the link to the Shop Design page. Id like the category drop down to appear for all three of my shop pages. Wellness, design & beauty. https://www.fromyourmuse.com/designshop

7 minutes ago, hboss22 said:

It didn't appear to work! Here's the link to the Shop Design page. Id like the category drop down to appear for all three of my shop pages. Wellness, design & beauty. https://www.fromyourmuse.com/designshop

Can you insert above code? Then we can check easier.

10 minutes ago, hboss22 said:

It didn't appear to work! Here's the link to the Shop Design page. Id like the category drop down to appear for all three of my shop pages. Wellness, design & beauty. https://www.fromyourmuse.com/designshop

Yes I've now included it! Please let me know what you think .

@hboss22 Please email me from the link that is in my signature. I have been doing a bunch of these lately for people. Squarespace seems to have different variations depending on the theme, I can custom tailor the code to your page.

Give me a few days to respond though, it takes a fair amount of work. It will also need to be changed if you add categories or change the names of them, so easiest thing is to make sure you have the categories the way you want them.

Ok if its too hard to do a drop down list on mobile then id like to make it so it looks like the image below! Where they're stacked. Let me know