Jump to content

How to Create Accordion Menu Footer For Mobile Only

Go to solution Solved by tuanphan,

Recommended Posts

Hello all,

Wondering if somebody can help me with this.

I'm looking to create a footer where a list of URLs collapse into an accordion on mobile only. I would like this to work in the same way as how the footer works on squarespace.com.

I've found this approach on stack overflow, which appears like it should work, but i'm unsure of how to integrate the jquery portion of the code. I presume it needs to be tweaked in order to work within the header/footer within code injection, but I can't seem to get it working. 

Also, very happy to look at a different approach if there's something that might be more suitable to a squarespace site. 

Any advise would really be appreciated.

Thanks,
Neal

 

 

Squarespace_desktop_footer.png

Squarespace_mobile_footer.png

Edited by neal_bryant
Link to comment
  • Solution

You can use Accordion Block, then add this code to Design > Custom CSS to show accordion on Mobile Only

/* hide accordion footer on desktop */
@media screen and (min-width:768px) {
	footer.sections .accordion-block {
		display: none;
}
}

 

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
  • 5 months later...
On 2/17/2023 at 5:52 AM, Margauxmnr said:

Hi, I used your solution for my website and it worked. But then how do you hide the normal footer on mobile ? Because now on the mobile I have both the desktop footer and the accordion...

Thank you !

Hi,

What is site url? We can check easier

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.