kaydotjpg Posted December 20, 2022 Posted December 20, 2022 password: mamaswhodream Hi! I am finding my site title a bit boring so trying a few things. Does anyone know how to center a site title? So, if you look at my site it would be: learn more, cost information, *Mamas Who Dream*, retreats, contact. Essentially 2 navigation links on either side of the site title. Thanks!
ArminB Posted December 20, 2022 Posted December 20, 2022 Hi! A site link would be wonderful so people can look into it About Armin: Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084 Website: www.braunsberger-media.com
kaydotjpg Posted December 20, 2022 Author Posted December 20, 2022 @ArminB ah! sorry, duh: https://pomegranate-aardvark-8rjz.squarespace.com/
tuanphan Posted December 22, 2022 Posted December 22, 2022 On 12/20/2022 at 9:10 PM, kaydotjpg said: ah! sorry, duh: https://pomegranate-aardvark-8rjz.squarespace.com/ First, change header layout to Left Nav - Middle Site Title Then we can give some code to achieve your request Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
kaydotjpg Posted December 27, 2022 Author Posted December 27, 2022 (edited) @tuanphan Okay! I did that, thanks- what's next? Edited December 27, 2022 by kaydotjpg
tuanphan Posted December 29, 2022 Posted December 29, 2022 On 12/27/2022 at 9:11 PM, kaydotjpg said: @tuanphan Okay! I did that, thanks- what's next? Add to Last Line in Code Injection > Footer <script> jQuery(document).ready(function($){ $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile'); }) </script> <style> .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;} .header-nav-item:nth-child(n+3) { margin-right: 1.5vw; } .header-actions.header-actions--right * { opacity: 1; transform: unset; } /* Fix dropdown */ .header-actions--right .header-nav-folder-content { opacity: 0; pointer-events: none; position: absolute; top: auto; left: auto; padding: .5em 1em; text-align: left; width: 200px; z-index: 10; margin-left: -1em; } .header-actions--right a.header-nav-folder-title { text-decoration: none; backface-visibility: hidden; padding: .1em 0; } .header-actions--right .header-nav-item--folder:hover .header-nav-folder-content { opacity: 1; pointer-events: auto; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
kaydotjpg Posted December 29, 2022 Author Posted December 29, 2022 @tuanphan Thank you ! This worked perfectly. However, the nav links where slightly pushed far out to the sides. I also put a boarder around the header. You helped me do this once for another site. So I added that same coding to this current site, however, the spacing is off. Could you me figure this out? https://pomegranate-aardvark-8rjz.squarespace.com/ Password: mamaswhodream
tuanphan Posted January 2, 2023 Posted January 2, 2023 On 12/29/2022 at 10:27 PM, kaydotjpg said: @tuanphan Thank you ! This worked perfectly. However, the nav links where slightly pushed far out to the sides. I also put a boarder around the header. You helped me do this once for another site. So I added that same coding to this current site, however, the spacing is off. Could you me figure this out? https://pomegranate-aardvark-8rjz.squarespace.com/ Password: mamaswhodream You mean fix this problem? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
kaydotjpg Posted January 2, 2023 Author Posted January 2, 2023 @tuanphan yes! I need to fix the problem you screen shotted above https://pomegranate-aardvark-8rjz.squarespace.com/ Password: mamaswhodream
tuanphan Posted January 4, 2023 Posted January 4, 2023 On 1/2/2023 at 11:01 PM, kaydotjpg said: @tuanphan yes! I need to fix the problem you screen shotted above https://pomegranate-aardvark-8rjz.squarespace.com/ Password: mamaswhodream First, remove this CSS .header-title-nav-wrapper { flex: 0 0 100% !important; margin-right: auto; width: 100% !important } Next, add this CSS .header-display-desktop { flex-direction: row !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
kaydotjpg Posted January 4, 2023 Author Posted January 4, 2023 @tuanphan This helped a bit! But something is still a little off, hmmm..... https://pomegranate-aardvark-8rjz.squarespace.com/ Password: mamaswhodream
Solution tuanphan Posted January 7, 2023 Solution Posted January 7, 2023 On 1/4/2023 at 10:11 PM, kaydotjpg said: @tuanphan This helped a bit! But something is still a little off, hmmm..... https://pomegranate-aardvark-8rjz.squarespace.com/ Password: mamaswhodream You can remove these borders? & align right Retreats & Contact? Can you add the code? I see header layout is changed here Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
kaydotjpg Posted January 9, 2023 Author Posted January 9, 2023 @tuanphan I ended up using an alternative header- it was just getting too tricky. Thank you for your help! tuanphan 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment