Jump to content

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

Recommended Posts

Site URL: https://henriqueisidoro.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! 

I tried this one: (it works, but when it opens it's not able to show all the options, because it crops)

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

 

Link to comment
  • Replies 1
  • Views 259
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

16 hours ago, henriquepisidoro said:

Site URL: https://henriqueisidoro.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! 

I tried this one: (it works, but when it opens it's not able to show all the options, because it crops)

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

 

Hi. What is site access password?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.