benrowe Posted November 30, 2023 Share Posted November 30, 2023 Hello, I am trying to centralize my header on Squarespace. I want the logo to remain in the center, and I want to split the link titles (there are four) and put two on each side. I want to also space them out more than the default setting. Here is what my header currently looks like: Here is what I want it to look like (it’s Photoshopped): Site link: http://thegoalside.com If anyone has a CSS code to achieve this, it would be greatly appreciated. Best, Ben Rowe Link to comment
Solution Web_Solutions Posted November 30, 2023 Solution Share Posted November 30, 2023 28 minutes ago, benrowe said: Hello, I am trying to centralize my header on Squarespace. I want the logo to remain in the center, and I want to split the link titles (there are four) and put two on each side. I want to also space them out more than the default setting. Here is what my header currently looks like: Here is what I want it to look like (it’s Photoshopped): Site link: http://thegoalside.com If anyone has a CSS code to achieve this, it would be greatly appreciated. Best, Ben Rowe Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS. .header-display-desktop { min-height: 90px; position: relative; .header-title-nav-wrapper { flex: 0 0 100% !important; .header-nav{ flex: 0 0 100% !important; .header-nav-list { width: 100% } .header-nav-item:nth-child(3) { margin-left: auto !important; } } .header-title { position: absolute; left: 50%; bottom: 50%; transform: translate(-50%, 50%) !important; z-index: 999999; } } } Kobir 1 If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks MD Rofik Website Designer and Digital Marketer ☕Am I helpful? Want to offer me a coffee? ✉ Send me a message if needed any help. I'll try to reply as soon as possible. Link to comment
benrowe Posted November 30, 2023 Author Share Posted November 30, 2023 Hello, Thank you very much for your reply. I now have the link titles split into two on each side. Now, would it be possible to space these out similar to how they looked in my Photoshop image? I would like them to be closer to the center of the header, if possible. I'm wondering if there are some numbers that we can add to the custom CSS to transform and space them out like this. Then, I can adjust the numbers as needed. Thanks! Best, Ben Rowe Link to comment
Web_Solutions Posted November 30, 2023 Share Posted November 30, 2023 5 minutes ago, benrowe said: Hello, Thank you very much for your reply. I now have the link titles split into two on each side. Now, would it be possible to space these out similar to how they looked in my Photoshop image? I would like them to be closer to the center of the header, if possible. I'm wondering if there are some numbers that we can add to the custom CSS to transform and space them out like this. Then, I can adjust the numbers as needed. Thanks! Best, Ben Rowe Replace the previous code with the code below. And you can increases the space between nav item by editing your header. See images .header-display-desktop { min-height: 90px; position: relative; .header-title-nav-wrapper { flex: 0 0 100% !important; .header-nav{ flex: 0 0 100% !important; .header-nav-list { width: 100%; max-width: 1050px; display: flex !important; margin: 0 auto !important; } .header-nav-item:nth-child(3) { margin-left: auto !important; } } .header-title { position: absolute; left: 50%; bottom: 50%; transform: translate(-50%, 50%) !important; z-index: 999999; } } } Kobir 1 If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks MD Rofik Website Designer and Digital Marketer ☕Am I helpful? Want to offer me a coffee? ✉ Send me a message if needed any help. I'll try to reply as soon as possible. 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