charlineca Posted October 24, 2022 Share Posted October 24, 2022 (edited) 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 October 24, 2022 by charlineca Link to comment
Ziggy Posted October 24, 2022 Share Posted October 24, 2022 Can you share your website URL? 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
charlineca Posted October 24, 2022 Author Share Posted October 24, 2022 2 hours ago, Ziggy said: Can you share your website URL? https://studiocote.co Link to comment
Ziggy Posted October 24, 2022 Share Posted October 24, 2022 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
charlineca Posted October 24, 2022 Author Share Posted October 24, 2022 (edited) 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. Edited October 24, 2022 by charlineca Link to comment
Ziggy Posted October 24, 2022 Share Posted October 24, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment