Moving the Site Title

So you want to move the site title/logo to the bottom? Here’s how!

1. Find the class name

On a Mac, press ⌘Command Shift C and highlight the site title or logo.
For this example, we are using the Brine template, so the class name is:

.has-site-title .Header-branding

Tip: The class name is not necessarily the same for all templates!

2. Custom CSS

• Go to Design > Custom CSS

• Copy and paste this CSS

7.0

.has-site-title .Header-branding {
  position: fixed;
  z-index: 1;
  bottom: 20px;
}

7.1

.header-title-text {
  position: fixed;
  z-index: 1;
  bottom: 20px;
}

• position: fixed will keep it in the same place

• You can increase/decrease the 20px depending on where you want to position it

FAQ

What is z-index for?

Without the z-index, the site title hides behind some index pages.

Unless that’s the look you’re going for, you’ll want it in your Custom CSS so it remains visible 👀

Read more about z-index here.

What if I want the site title to be on the bottom left corner?

Add left to the above Custom CSS:

7.0

.has-site-title .Header-branding {
  position: fixed;
  z-index: 1;
  bottom: 20px;
  left: 20px;
}

7.1

.header-title-text {
  position: fixed;
  z-index: 1;
  bottom: 20px;
  left: 20px;
}