Responsive Web Design Footer with HTML, CSS, and JQuery Code Examples

Too often do designers treat website footers as an afterthought. Footers are a highly functional piece of the user interface. Furthermore, large, rich content footers are the perfect place for a website to provide users with useful information such as contact details, social media links, important site navigation, and legal information. The problem is, that is a lot of information and things can get crowded on smaller devices. To solve this, I like to consolidate this information to improve the usability and maximize screen real estate for mobile and tablet users.

Vertical screen real estate is a precious commodity.

Below you’ll find my approach to creating a robust responsive footer. I’ll break down the HTML, CSS, and JQuery that makes it function, as well as the thought process behind each decision.

Disclaimer: It’s going to get nerdy.

The Approach

This responsive footer technique is based off the idea that the most important information should be to the left starting with the logo and social links, contact, and then site navigation in that respective order. It has two main break points. One at 749px for a tablet view and another at 500px for a mobile view. These are arbitrary values and could differ depending on the amount of content that your footer has. At the 500px breakpoint, you’ll notice that the navigation sections get consolidated into collapsed dropdowns to decrease their vertical screen real estate.

The HTML

Here’s the basic HTML setup for the footer. Obviously, sections could be added, deleted, or lengthened, but the main concept is that everything is evenly spread out on the same plane at desktop sizes. Note, the social media icons are SVGs that are generated with code.

See the Pen Responsive Footer by Alex Caldwell (@ACaldy) on CodePen.

The CSS

This is the CSS that controls everything. The footer container gets some basic styles, and the centered div wraps everything with a max-width of 1200px. The centered class also adds flexbox to the contained divs so that they sit on the same plane with the same heights (I love this basic feature of flexbox).

See the Pen Responsive Footer by Alex Caldwell (@ACaldy) on CodePen.

The next chunk of CSS (Lines 16-56) styles and positions the logo, contact, and navigation divs. We use percentage based widths here so that the everything scales down nicely from 1200px to 750px.

At our first breakpoint at 749px (Lines 59-79), the logo and contact containers go to width:50% and the navigation container goes width:100%. This creates two neatly stacked rows of information. To accomplish this, we also need to add flex-wrap:wrap; to the centered div. In addition, we add a bit of padding to the contact and navigation divs as well as a max-width to the logo div to stop it from getting too big, because I don’t like that.

The next breakpoint at 500px (Lines 82-152) is where the magic happens. All of the divs stack with width:100%. We then prep the h3 to get some interaction hints by removing the margin, adding padding (increased hit area), and adding the property cursor:pointer to make it change to the hand/pointer on rollover. Furthermore, we also add a down arrow with the ::after selector and some css (Lines 107-124).

To collapse the navigation links in each section we simply add a max-height:0 and an overflow:hidden to the footer-links container. At this point we are primed and ready for a simple jQuery function to do the rest of the heavy lifting.

The jQuery

When the h3 is clicked we toggle the active class to footer-links-holder. This allows us to change the max-height on footer-links to 1000px (or a number larger than the height of the actual div). By adding the active class to the footer-links-holder container it also allows us to transform the down arrow 180 degrees for a nice effect (Lines 136-141).

See the Pen Responsive Footer by Alex Caldwell (@ACaldy) on CodePen.

And that’s it. Hopefully this simple technique helps you build a responsive footer that works equally well on desktop, tablet, and mobile devices. An important aspect of responsive design is paying attention to vertical screen real estate, no matter where it is on the website. Feel free to use this code for any personal or commercial project that you’d like. Connect with me on twitter if you have any questions or comments.