Footer Navigation in Columns on Mobile

What does this code do?

This code snippet will allow you to create a custom footer navigation that displays in columns when being viewed from a mobile device.

For more options, check out this code snippet regarding changing the order and layout of the footer on mobile.

Code Snippets

Code Block

Copy and paste the code into a Code Block in your footer.

<div class = "custom-footer">
  <div class="footer-column">
    <p>
      <a href="LINKGOESHERE">Home</a>
      </br>
      <a href="LINKGOESHERE">About</a>
   </p>
  </div>
  <div class="footer-column">
    <p>
      <a href="LINKGOESHERE">Blog</a>
      </br>
      <a href="LINKGOESHERE">Contact</a>
    </p>
  </div>
</div>

The customize the number of columns, the number of links per column, and the links themselves.

CSS

Copy and paste the following code into Design > Custom CSS.

.custom-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* horizontal alignment */
  align-items: flex-start; /* vertical alignment */
  text-align: right; /* text alignment */
}
.footer-column {
  margin: 1vw 2vw !important; /* spacing between columns */
}

@media only screen and (max-width: 640px) {
  .custom-footer {
  justify-content: space-evenly; /* horizontal alignment on mobile */
   text-align: center; /* text alignment on mobile */
  }
}

Then customize the alignment and spacing. You can use the following as a guide for horizontal and vertical alignment.

Justify Content

flex-start : aligned on the left of the container

flex-end: aligned on the right of the container

center: aligned in the center of the container

space-evenly: spaced evenly across the container

space-between: spaced at the start and end of the container

Align Items

flex-start : aligned at the top of the container

flex-end: aligned on the bottom of the container

center: aligned in the center of the container

space-evenly: spaced evenly across the container

space-between: spaced at the top and bottom of the container

How To Use It

1. Set up your navigation in the code block and customize the text and links.

2. Copy and paste the code as indicated above.

3. Customize for the alignment and spacing.