Custom Footer

vividvisuals

Website is www.vividvisuals.asia

I'm wanting to create a custom footer to include a site map with links to important pages on my site and, ideally but less important, a section above that for "We've Worked for" along with logos of some of the brands we've serviced.

So far, all I've found to help me do this is Hikin'Mike's (always helpful!) post about pinning header & footer. Unfortunately this doesn't actually seem to do anything? When I go to the custom css bit for my theme and paste it in, nothing happens.

What I'm going for is a footer similar to this with a black background and white text:

Thanks again!

-Alex

Hikin' Mike

I pretty sure it's not going to pin your footer because of the parallax code.

Hikin' Mike

If all you want is a custom Footer, without pinning, then this should get you started. I would set your HTML Block's margins from the default 12px to 0.

HTML

<div class="brands">

  <ul>
    <li>Brand 1</li>
    <li>Brand 2</li>
    <li>Brand 3</li>
    <li>Brand 4</li>
  </ul>

</div>

<div class="custom-footer">

  <div class="column col1">
    <ul>
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
      <li><a href="">Link 4</a></li>
    </ul>
  </div>

  <div class="column col2">
    <ul>
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
      <li><a href="">Link 4</a></li>
    </ul>
  </div>

  <div class="column col3">
    <ul>
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
      <li><a href="">Link 4</a></li>
    </ul>
  </div>

  <div class="column my-social">
    <ul>
      <li>Follow Us</li>
      <li><a href="http://www.facebook.com/stephantravelphotography"><span class="sm-fonticon sm-fonticon-large sm-fonticon-FacebookSquare">Facebook</span></a></li>
      <li><a href="http://www.instagram.com/stephantravelphotography"><span class="sm-fonticon sm-fonticon-large sm-fonticon-InstagramSquare2">Instagram</span></a></li>
      <li><a href="https://www.vividvisuals.asia/#"><span class="sm-fonticon sm-fonticon-large sm-fonticon-EmailSquare">E-Mail</span></a></li>
    </ul>
  </div>

</div>

CSS

.brands,
.custom-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.brands {
  padding: 10px;
  background: gray;
}

  .brands li {
    display: inline;
    margin: auto 1rem;
  }

.custom-footer {
  padding: 1.5rem;
  background: black;
}

  .custom-footer a {color: white;}

.column {
  width: 25%;
  min-width: 300px;
}

  .column li {margin: 1rem auto;}

.my-social span {width: 100%;}

I assume you want to use logos from your brands, so I would make all logos the same height and replace the text for each logo image using the Share a Link.

vividvisuals

Mike, you're a legend as always. This is super helpful and looks great.

If I can be picky, just one very small thing. Is there a way to have the font from the social icons match my font elsewhere? Tried to find it in the code but not seeing it.

Hikin' Mike

Not picky at all. You'll have to modify your HTML and add more CSS.

You'll need to wrap the social text in a <p> tag, like this in your HTML:
<p>Facebook</p>, <p>Instagram</p>, and <p>E-Mail</p>

Add this to your CSS block section. Change the font-family and font-size to suit.

.my-social p {
  font-family: 'Open Sans';
  display: inline;
  font-size: 12px;
}

vividvisuals

Awesome. Thanks again, Mike!

Hikin' Mike

I noticed you didn't wrap those logos with a <li>. I would add those so you can center them when it goes to mobile. I would also add your "We've Shot" here and remove it on your other HTML Block.

<div class="brands">

  <h2>We've Shot</h2>

  <ul>
    <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-WkMVH76/0/c1655b79/O/Untitled%20design%20%2872%29.png" width="80px"></li>
    <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-86hx5W4/0/5cc0a2df/O/6.png" width="110px"></li>
    <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-D65Qqkx/0/0abdcb20/O/11.png" width="110px"></li>
    <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-NRrtSjm/0/931a789d/O/5.png" width="110px"></li>
    <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-Fb796xM/0/0302a3eb/O/4.png" width="110px"></li>
    <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-r6HJCjf/0/056aecd4/O/Untitled%20design%20%2874%29.png" width="90px"></li>
    <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-BLrKj2Q/0/9a3ff679/O/Untitled%20design%20%2875%29.png" width="90px"></li>
    <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-rg4cvbV/0/fd05ee2e/O/9.png" width="90px"></li>
  </ul>

</div>

Then add this to your CSS:

.brands h2 {
  font-size: 30px;
  font-weight: 300;
  color: #fff;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
}

.brands ul {text-align: center;}