Jump to content

Shop Navigation: Slider to Drop Down

Recommended Posts

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. 

IMG_4351.PNG

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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

 

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
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?

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
  • 5 months later...
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.

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

Link to comment
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.

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

@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.

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.