How to Create a Collapsible Footer

  Footer


Don't neglect the small elements of building a mobile-responsive website. Here's how to craft a collapsible footer to improve your visitors' navigation regardless of what screen they use.

How to Create a Collapsible Footer

Responsive websites are no longer design trends; they’re necessities. With over half of web users accessing the internet via smartphone rather than desktop, websites that don’t look function on mobile simply won’t survive. In fact, most websites are now being designed with mobile-first usage in mind. And ensuring your site works on a smartphone as well as it does on desktop is also now a bigger ranking priority for Google than it has been in previous years.

Most websites do a decent job of making sure their website is responsive from stem to stern, but even the best web pages can sometimes forget about one critical part -- the footer. Here’s a quick and easy tutorial using simple Bootstrap, HTML and SCSS.

HTML

The HTML relies heavily on some standard bootstrap classes, particularly 'collapse' and 'accordion' for its responsive functionality:

SCSS

Just a handful of lines of SCSS will customize the collapsible columns:

Try this out for your own website! Before you code, be sure to check out the finished product on the JSFiddle below. To see exactly how it responds, adjust the browser's window size to a variety of widths. Stretch it or shrink it however you want and see what this code could do for your website. 

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.