Jump to content

Tagline not showing in the middle of navigation header

Recommended Posts

Hi, I have used the following code to add a tagline to my navigation header:

@media screen and (min-width: 768px) {
  .header-title:after { content: 'BRAND DESIGN'; 
  display: inline-block !important;
 font-size: 11px; 
  letter-spacing: 0.1px; 
  font-family: Montserrat; 
  color: #000000; 
  text-align: center !important;
  vertical-align:middle !important;
}
  }

However, I can only get it to show up under the site title.. I would like for it to show next to the site title, centered in line in the middle of the page.

 

Can anyone help with that?

Edited by charlineca
Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Try this minor adjustment:

@media screen and (min-width: 768px) {
  .header-title a:after { 
   content: 'BRAND DESIGN'; 
   display: inline-block !important;
   font-size: 11px; 
   letter-spacing: 0.1px; 
   font-family: Montserrat; 
   color: #000000; 
   text-align: center !important;
   vertical-align:middle !important;
 }
}

Hope that works!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
21 minutes ago, Ziggy said:

Try this minor adjustment:

@media screen and (min-width: 768px) {
  .header-title a:after { 
   content: 'BRAND DESIGN'; 
   display: inline-block !important;
   font-size: 11px; 
   letter-spacing: 0.1px; 
   font-family: Montserrat; 
   color: #000000; 
   text-align: center !important;
   vertical-align:middle !important;
 }
}

Hope that works!

It moved it next to the site title, which is good, but it's right next to it now, instead of being in the middle of the page. I can move it when I put in a 50px padding, but I need to be able to position it in the middle so it's responsive.

Screenshot 2022-10-24 at 18.05.54.png

Edited by charlineca
Link to comment

Getting it truly in the center of the page would be difficult since you're adding the text in as a pseudo element to the header logo which itself is in a flex container 67% of the header width. Having a responsive padding (using VW instead of PX) would allow it to be somewhat centered some of the time, but left aligned will probably look and work better.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.