- Posts
Hi there,
Is there a way to easily center our title on the page? We’re using the Swifty theme, if that helps. Also, I added some custom CSS code to change our title to purple (per your instructions a few months ago). It worked for the home page, but the rest of the pages still show the title in the old color. If you could help me fix that too, I’d really appreciate it!
Thank you so much!
Hi Kristin-
Thanks for reaching out, and thanks for using the Swifty Theme!
Swifty’s header design is hard-coded, but it is possible to accomplish this with a little bit more custom CSS and a little bit of JavaScript. If you’re interested in getting full control over your header design without any coding, I recommend checking out our newest theme, Crio.
If you’d like to stick with Swifty, here’s what you’ll need to do. Navigate to Customize > Advanced > Custom JS & CSS.
First, add this line to your Custom Theme CSS to center both your site title and tagline:
.header-6 h1, .header-6 h3 { text-align: center; }Then, add these two lines to your Custom Theme JS to remove the empty column on the right of your current title, and to make the column full-width:
jQuery('.row.header-6 .header-6').addClass('col-md-12').removeClass('col-md-6'); jQuery('.row.header-7 .header-7').remove();Make sure to watch out for the
//characters that get added to your JavaScript, and delete those to make sure both lines take effect.Hi Jesse,
That was super helpful–thank you! Quick question: everything worked perfectly on the home page (https://mothernaturestruths.com), but on the other pages, the title still isn’t purple and only the tagline is centered (an example of what I mean is at https://mothernaturestruths.com/cleaning/).
I checked and the // characters on my JavaScript aren’t there, so I’m not sure why the title didn’t center on the other pages. Any thoughts? And how do I get the color to match (as purple) on all the pages?
Thank you again!
Kristin
Hi Kristin-
Sorry about that! The code I provided earlier needs a little modification to work on the pages other than home.
The JavaScript you have is fine, we just need to update the CSS rules I gave you. Replace your current rules with these:
h1.site-title a, p.site-title a { color: #410936 !important; } .header-6 h1, .header-6 h3, .header-6 p { text-align: center;}That worked perfectly, Jesse. Thank you!
- The topic ‘How to Center the Site Title and Tagline with Swifty Theme?’ is closed to new replies.
