Jump to content

How can I collapse navigation folders in the mobile menu (Wells template)

Recommended Posts

On 3/22/2021 at 12:52 AM, LaurenD said:

Site URL: https://www.laurendenitzio.com

By default, the Wells template displays all navigation folders as expanded in the mobile menu, so you see all sub pages. I want people to be able to click on a folder to expand it, otherwise the mobile menu is way too busy. Is there code injection I can use to collapse the folders in the mobile menu? Thanks so much! 

https://www.laurendenitzio.com

Advanced code injection may helps

/* Put this into Settings->Advanced->Code injection->Footer */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.mobile-folder > ul { display: none; }
</style>
<script>
$(document).ready(function() {
	$(document).on("click", ".mobile-folder > a", function(e) {
      e.preventDefault();
      $(this).next("ul").slideToggle()    
      return false;
  })
});
</script>

image.png.58b5275da8d6e026896d525da3cdf1e6.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.