KimWrenCo Posted July 15, 2020 Share Posted July 15, 2020 Site URL: https://chameleon-grouse-yjyf.squarespace.com/config/ I am reconstructing an existing site (originally built in Wix) for a client. Is it possible in 7.1 to have a center logo with evenly split navigation links (i.e. two to the left of the logo and two to the right of the logo)? This isn't an option in the Header Layout settings. I've attached an image of the desired placement result. Thanks! Kim Link to comment
derricksrandomviews Posted July 22, 2020 Share Posted July 22, 2020 https://stackoverflow.com/questions/3121876/css-style-divide-nav-into-left-and-right Link to comment
tuanphan Posted July 22, 2020 Share Posted July 22, 2020 You need CSS + JavaScript to achieve this. This requires Business Plan. Complicated. 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!) Link to comment
KwameAndCo Posted September 4, 2020 Share Posted September 4, 2020 @tuanphan could you help me with it? Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
tuanphan Posted September 12, 2020 Share Posted September 12, 2020 On 9/4/2020 at 6:29 PM, Kwamzilla said: @tuanphan could you help me with it? Can you share site url? We can check easier. 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!) Link to comment
Juicebox Posted September 16, 2020 Share Posted September 16, 2020 @tuanphan I also am trying to achieve this for a client. Very little CSS and Java experience but comfortable copy and pasting a code. Website is www.bellainspired.co and password is bella Link to comment
KwameAndCo Posted October 8, 2020 Share Posted October 8, 2020 Did anyone have any luck with this? Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
tuanphan Posted October 8, 2020 Share Posted October 8, 2020 2 minutes ago, Kwamzilla said: Did anyone have any luck with this? I answered Juicebox in his post. 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!) Link to comment
maldrich Posted October 9, 2020 Share Posted October 9, 2020 Anybody find an answer for this? 🙂 Link to comment
Webswool Posted October 17, 2020 Share Posted October 17, 2020 I'm trying to solve the issue by playing with the margins/padding of the navigation links - my client isn't willing to pay for a business plan so I'm relying solely on CSS. I need to test it more thoroughly, but so far it seems to be doing the trick. I used the following code: // Navigation Links Spacing // .header-nav-item:nth-child(3) a { padding-left: 100px!important;} .header-nav-item:nth-child(2) a { margin-left: 0px!important; margin-right: 450px!important;} Link to comment
tuanphan Posted October 19, 2020 Share Posted October 19, 2020 On 10/17/2020 at 7:48 AM, Webswool said: I'm trying to solve the issue by playing with the margins/padding of the navigation links - my client isn't willing to pay for a business plan so I'm relying solely on CSS. I need to test it more thoroughly, but so far it seems to be doing the trick. I used the following code: // Navigation Links Spacing // .header-nav-item:nth-child(3) a { padding-left: 100px!important;} .header-nav-item:nth-child(2) a { margin-left: 0px!important; margin-right: 450px!important;} You can try using position relative with negative value for left for nth-child(3), recently I solved for a member using this approach 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!) Link to comment
Webswool Posted October 19, 2020 Share Posted October 19, 2020 Thanks @tuanphan - in the end I ended up cheating as the code I used above became tricky on pages where the logo wasn't hidden. Instead I've ended up utilising the email and social media elements and using the header button for the contact phone number. Have attached photo. It's a simple fix but it's done the job for this particular project! Link to comment
mmkemp Posted December 7, 2020 Share Posted December 7, 2020 hi @tuanphan, i am trying to do this with a client site as well - is there any chance you may be able to support? https://point-orchid-97hn.squarespace.com/ pw: rosebuds Link to comment
tuanphan Posted December 8, 2020 Share Posted December 8, 2020 5 hours ago, mmkemp said: hi @tuanphan, i am trying to do this with a client site as well - is there any chance you may be able to support? https://point-orchid-97hn.squarespace.com/ pw: rosebuds Do you use Personal or Business Plan? 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!) Link to comment
Tim_A_SquareSpacer Posted December 8, 2020 Share Posted December 8, 2020 Hi @tuanphan, is the only way to have Nav (left) - logo (centre) - Nav (Right) by using JavaScript? Any pointers would be much appreciated. Thanks. Link to comment
tuanphan Posted December 9, 2020 Share Posted December 9, 2020 16 hours ago, Tim_A_SquareSpacer said: Hi @tuanphan, is the only way to have Nav (left) - logo (centre) - Nav (Right) by using JavaScript? Any pointers would be much appreciated. Thanks. You can use CSS, however it is time consuming 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!) Link to comment
mmkemp Posted December 9, 2020 Share Posted December 9, 2020 Business account @tuanphan Link to comment
mmkemp Posted December 11, 2020 Share Posted December 11, 2020 hi @tuanphan, please let me know what else you need from me. it's a business account + would like three menu items to the left and three to the right of the centered logo. thank you! Link to comment
CLF Posted January 15, 2021 Share Posted January 15, 2021 I would like to do this myself. Not scared of CSS/JavaScript. Stack Overflow link is useful, but it's not clear which markup/code snippets should be added to the site Code Injection for the split navigation to work. Can someone point me in the right direction I want three nav links, then logo, then three nav links (left to right) in header. Link to comment
tuanphan Posted January 17, 2021 Share Posted January 17, 2021 On 1/15/2021 at 8:57 AM, CLF said: I would like to do this myself. Not scared of CSS/JavaScript. Stack Overflow link is useful, but it's not clear which markup/code snippets should be added to the site Code Injection for the split navigation to work. Can someone point me in the right direction I want three nav links, then logo, then three nav links (left to right) in header. Have you solved it yet? 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!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.