whereisscott Posted January 3 Share Posted January 3 Hi all, I'm starting a new website and one of the elements the client is asking for is a small section above the navigation bar for an image and some text (please see the attached). Seems simple to do, but I haven't been able to land a solution yet. Has anyone achieved something similar? Thanks, -Scott Link to comment
Beyondspace Posted January 4 Share Posted January 4 (edited) 3 hours ago, whereisscott said: Hi all, I'm starting a new website and one of the elements the client is asking for is a small section above the navigation bar for an image and some text (please see the attached). Seems simple to do, but I haven't been able to land a solution yet. Has anyone achieved something similar? Thanks, -Scott Squarespace have a standard feature - announcement bar which appears on the top of your website. If you need to add a custom layout like your images attached, we can add it on the footer and use some javascript code to move it above the header. It is noticed that javascript is only available on Business Plan or above ones. Edited January 4 by Beyondspace Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
whereisscott Posted January 4 Author Share Posted January 4 Thank you for your reply. The announcement bar doesn't hold graphics, so this wouldn't be a suitable solution for what we need to do here. I'm curious - couldn't moving a section to the top also be done with CSS? Link to comment
tuanphan Posted January 7 Share Posted January 7 It's possible with CSS, but it depends Black nav will stick to top on scroll or not? This for one page or all pages? With CSS the solution might be to create that section as the first section, then use CSS position to move the position of the two sections. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Solution whereisscott Posted January 10 Author Solution Share Posted January 10 Hi @tuanphan Yes, I was able to do this - here's the code. It would only work for a single page since this targets only the section that would be on the homepage right now, but it's good to know how I'd do this. (I've since created a workaround that includes the text the client wanted to be on the navigation bar). Here's the code, though: #header { position: absolute; top: 340px; /* This value determines the distance from the top of the page */ left: 0; } section[data-section-id="NUM] { position: absolute; bottom: 190px; /* This value determines the distance from the top of the page */ left: 0; } tuanphan 1 Link to comment
Dovely2023 Posted February 3 Share Posted February 3 Hi @tuanphan this was super helpful for us, but I noticed when I am previewing the site in the header it looks perfect but when I go to actually preview the link in a private browser the home page is all messed up. Do I need to adjust the css in some way? I'd appreciate your help! Screenshots below for reference. https://penguin-toucan-s42t.squarespace.com/ Password: DoveLove2023! Link to comment
tuanphan Posted February 8 Share Posted February 8 On 2/4/2023 at 5:20 AM, Dovely2023 said: Hi @tuanphan this was super helpful for us, but I noticed when I am previewing the site in the header it looks perfect but when I go to actually preview the link in a private browser the home page is all messed up. Do I need to adjust the css in some way? I'd appreciate your help! Screenshots below for reference. https://penguin-toucan-s42t.squarespace.com/ Password: DoveLove2023! Which exact steps did you do to achieve this? We can troubleshoot easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Dovely2023 Posted February 8 Share Posted February 8 5 hours ago, tuanphan said: Which exact steps did you do to achieve this? We can troubleshoot easier Hi @tuanphan I added the code below to the home page header code injection. Let me know if you have any other questions. Thank you! <style> #header { position: absolute; top: 800px; left: 0; } section[data-section-id="63d2bf7a62c5995280861b4e"] { position: absolute; bottom: 50px; left: 0; } #siteWrapper.site-wrapper .sqs-button-element--primary { border-color: #E8927C; } </style> <style> @media screen and (max-width: 641px) { #header { position: absolute; top: 650px; left: 0; } section[data-section-id="63d2bf7a62c5995280861b4e"] { position: absolute; bottom: 50px; left: 0; } #siteWrapper.site-wrapper .sqs-button-element--primary { border-color: #E8927C; } } </style> Link to comment
Dovely2023 Posted February 9 Share Posted February 9 Hi @tuanphan just following up on this. Let me know if you have any other questions. Thank you! Link to comment
Dovely2023 Posted February 9 Share Posted February 9 On 2/3/2023 at 4:20 PM, Dovely2023 said: Hi @tuanphan this was super helpful for us, but I noticed when I am previewing the site in the header it looks perfect but when I go to actually preview the link in a private browser the home page is all messed up. Do I need to adjust the css in some way? I'd appreciate your help! Screenshots below for reference. https://penguin-toucan-s42t.squarespace.com/ Password: DoveLove2023! Hi @whereisscott thank you for providing the code. It worked perfectly for our site. The only thing we noticed though is that the changes took in the editor preview mode, but when we view the site in a private window outside the editor the hero section looks completely off. You can see above for screenshots. Would you be able to help us with this? Our site URL is https://penguin-toucan-s42t.squarespace.com/ and the password is DoveLove2023! Thank you for advice you have. Link to comment
Dovely2023 Posted February 9 Share Posted February 9 8 minutes ago, Dovely2023 said: Hi @whereisscott thank you for providing the code. It worked perfectly for our site. The only thing we noticed though is that the changes took in the editor preview mode, but when we view the site in a private window outside the editor the hero section looks completely off. You can see above for screenshots. Would you be able to help us with this? Our site URL is https://penguin-toucan-s42t.squarespace.com/ and the password is DoveLove2023! Thank you for advice you have. Hi @whereisscott we actually found a better solution for the hero image above the navigation but now the entire section disappears when we preview the site outside the squarespace editor preview. Have you seen this before? Any ideas on how to fix? We would appreciate your help! Link to comment
Dovely2023 Posted February 9 Share Posted February 9 4 hours ago, Dovely2023 said: Hi @whereisscott we actually found a better solution for the hero image above the navigation but now the entire section disappears when we preview the site outside the squarespace editor preview. Have you seen this before? Any ideas on how to fix? We would appreciate your help! I actually figured this out. Thank you! 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