Jump to content

Moving tagline under title using Custom CSS

Recommended Posts

Site URL: https://www.worldwidestages.com/

Hello,
 
I'm trying to add / move the tagline to be under the site title. I tried the code in some of the threads but just can't seem to get it to show up, I know I'm doing something wrong that is easy and I'm hoping this thread can help me with. 
 
Thank you in advance! 🙌
 
This is the website - https://www.worldwidestages.com/
 
This is the tageline 'The premier production campus for the world’s entertainment industry sm"
Link to comment

The following CSS should work:

/* Move site tagline below site title */
.site-branding {
  flex-direction: column;
}

/* Add styles to tag line */
.site-tagline {
  /* add space above */
  margin-top: 10px;

  /*
    flex-start = align left
    center = center align
    flex-end = align right
   */
  align-self: 'flex-start';

  /* Remove the default space on the left */
  margin-left: 0 !important;
}

 

Edited by jpeter
Link to comment

Thank you for this - Is there a way to;

  • Increase the spacing between the title and tagline.
  • Center or left aline the tagline to the title. 
  • Have a different tagline on the landing page from the internal pages. (likely not)

I really appreciate this @jpeter

Link to comment
7 hours ago, HMH said:

Is there a way to;

  • Increase the spacing between the title and tagline.
  • Center or left aline the tagline to the title. 
  • Have a different tagline on the landing page from the internal pages. (likely not)

I've updated the original code that adds styles for the .site-tagline. Update the value of the align-self property to either flex-start, center, or flex-end. Update the margin-top property to adjust the spacing between the title and tagline. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.