AffinityAuthorServices Posted November 15, 2020 Share Posted November 15, 2020 (edited) Site URL: https://www.affinityauthorservices.com I am looking to relocate my header navigation below my header banner exactly like this site: https://harlow.showit.site/ I also would like to know how to center my logo and have my links on either side like this website as well! Any help at all would be amazing. I have not been able to find any CSS regarding this and the ones I did find did not work for me. Unpublished/still in progress site: www.affinityauthorservices.com PW: AAS Edited November 15, 2020 by AffinityAuthorServices Link to comment
tuanphan Posted December 24, 2020 Share Posted December 24, 2020 (edited) Add this code to Home > Design > Custom CSS. Replace beaverhero with your banner image url. /* Add a banner */ body.homepage div#siteWrapper:before { content: ""; background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg); background-size: cover; background-repeat: no-repeat; display: block; width: 100%; height: 500px; } /* Add sticky header */ header#header { position: sticky !important; top: 0; } Edited December 24, 2020 by tuanphan lysbeth123 and SabraFRC 1 1 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
lysbeth123 Posted March 17, 2021 Share Posted March 17, 2021 Hi tuanphan, thank you for the code above, it is exactly what I need. But I want a video instead of an image and am not sure where to place the video url. Do I need to embed code instead? /* Add a banner */ body.homepage div#siteWrapper:before { content: ""; background-image: url(PUT VIDEO URL HERE??); background-size: cover; background-repeat: no-repeat; display: block; width: 100%; height: 500px; } /* Add sticky header */ header#header { position: sticky !important; top: 0; } Link to comment
Beyondspace Posted March 17, 2021 Share Posted March 17, 2021 25 minutes ago, lysbeth123 said: Hi tuanphan, thank you for the code above, it is exactly what I need. But I want a video instead of an image and am not sure where to place the video url. Do I need to embed code instead? /* Add a banner */ body.homepage div#siteWrapper:before { content: ""; background-image: url(PUT VIDEO URL HERE??); background-size: cover; background-repeat: no-repeat; display: block; width: 100%; height: 500px; } /* Add sticky header */ header#header { position: sticky !important; top: 0; } background image only with work with regular image or gif file url, not video lysbeth123 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
lysbeth123 Posted March 17, 2021 Share Posted March 17, 2021 Okay, bummer. Thank you bangank36. /* Add a banner */ body.homepage div#siteWrapper:before { content: ""; background-image: url(PUT VIDEO URL HERE??); background-size: cover; background-repeat: no-repeat; display: block; width: 100%; height: 500px; } /* Add sticky header */ header#header { position: sticky !important; top: 0; } Link to comment
tuanphan Posted March 28, 2021 Share Posted March 28, 2021 @lysbeth123 Have you found the solution yet? 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
Alexiia Posted April 11, 2021 Share Posted April 11, 2021 @tuanphan the code works great but is it possible to add the text like in the example site? Link to comment
tuanphan Posted April 17, 2021 Share Posted April 17, 2021 On 4/11/2021 at 5:34 PM, Alexiia said: @tuanphan the code works great but is it possible to add the text like in the example site? You mean this text? + SCROLL TO EXPLORE 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
ryan.eaton Posted April 28, 2021 Share Posted April 28, 2021 Can the menu be moved below a SECTION rather than just a static banner? so the top section could have links ect? Link to comment
tuanphan Posted May 3, 2021 Share Posted May 3, 2021 On 4/28/2021 at 8:51 AM, ryan.eaton said: Can the menu be moved below a SECTION rather than just a static banner? so the top section could have links ect? Can you share link to your site? We can check 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
ryan.eaton Posted May 4, 2021 Share Posted May 4, 2021 17 hours ago, tuanphan said: Can you share link to your site? We can check easier This is what ive created for a studio who wanted clickable links in the top banner (and I HATE IT), I wish we could position the normal menu under a section rather than having to code something. https://www.razstudios.com.au Link to comment
tuanphan Posted May 5, 2021 Share Posted May 5, 2021 On 5/4/2021 at 8:06 AM, ryan.eaton said: This is what ive created for a studio who wanted clickable links in the top banner (and I HATE IT), I wish we could position the normal menu under a section rather than having to code something. https://www.razstudios.com.au You mean move "enroll here.." violet bar, under kid banner? 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
ryan.eaton Posted May 6, 2021 Share Posted May 6, 2021 Nah the site looks how I want it, but I don't like the menu I had to create using code, it doesn't sit well on the page and I was hoping there was a way to just put the normal Squarespace menu back in but have it sit where the other menu is now. Link to comment
tuanphan Posted May 9, 2021 Share Posted May 9, 2021 On 5/5/2021 at 8:54 AM, tuanphan said: You mean move "enroll here.." violet bar, under kid banner? I still don't quite understand. Do you have a mockup descript what you want? 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
ryan.eaton Posted May 10, 2021 Share Posted May 10, 2021 (edited) I have used another website as an example. This is the normal menu and I just want to have it below a section, and still be able to have an image and text and links (if I want it) in the section above... but just have the normal menu below. Edited May 10, 2021 by ryan.eaton order Link to comment
tuanphan Posted May 16, 2021 Share Posted May 16, 2021 On 5/10/2021 at 7:02 PM, ryan.eaton said: I have used another website as an example. This is the normal menu and I just want to have it below a section, and still be able to have an image and text and links (if I want it) in the section above... but just have the normal menu below. I see menu is under banner here. What is your problem? 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
dean1 Posted June 21, 2021 Share Posted June 21, 2021 (edited) On 12/24/2020 at 2:29 AM, tuanphan said: Add this code to Home > Design > Custom CSS. Replace beaverhero with your banner image url. /* Add a banner */ body.homepage div#siteWrapper:before { content: ""; background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg); background-size: cover; background-repeat: no-repeat; display: block; width: 100%; height: 500px; } /* Add sticky header */ header#header { position: sticky !important; top: 0; } Hi there, We're trying to implement this CSS code on a website we're doing for a client. It doesn't seem to be doing anything... We want an image ABOVE the navigation bar - when entering this code nothing happens. We replace the entire beaverhero http with our own (not sure we're doing that correctly though we have tried many many ways) The site is currently password protected as it's not to be published until we finish designing it. https://tapestryministries.squarespace.com pwd: Tapestry2021 Edited June 21, 2021 by dean1 Link to comment
tuanphan Posted June 22, 2021 Share Posted June 22, 2021 14 hours ago, dean1 said: Hi there, We're trying to implement this CSS code on a website we're doing for a client. It doesn't seem to be doing anything... We want an image ABOVE the navigation bar - when entering this code nothing happens. We replace the entire beaverhero http with our own (not sure we're doing that correctly though we have tried many many ways) The site is currently password protected as it's not to be published until we finish designing it. https://tapestryministries.squarespace.com pwd: Tapestry2021 The code should work. See here: https://www.loom.com/share/0f2bcabc28d4400796f3f859d166ada4 Can you take a quick video how did you add the code? 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
dean1 Posted June 22, 2021 Share Posted June 22, 2021 (edited) 9 hours ago, tuanphan said: The code should work. See here: https://www.loom.com/share/0f2bcabc28d4400796f3f859d166ada4 Can you take a quick video how did you add the code? Okay we got it! We had font codes in there and that was causing the code to not work. But now we want to know how to adjust the focus of that image if that's possible? Specifically on the mobile site. We want the graphic to be the focus on the mobile site at the top: Edited June 22, 2021 by dean1 Link to comment
tuanphan Posted June 23, 2021 Share Posted June 23, 2021 Don't remove above code Add this @media screen and (max-width:767px) { body.homepage div#siteWrapper:before { height: 200px !important; } } 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
ryan.eaton Posted January 12, 2022 Share Posted January 12, 2022 On 5/16/2021 at 12:21 PM, tuanphan said: I see menu is under banner here. What is your problem? That menu is actually a html code I added to create a menu, its not the native squarespace nav bar. When a new page is added by the client the html code needs to be updated every time so it appears. I just want to know if I can move the native nav bar down. I was hoping for some kind of code to display the native navigation in section[data-section-id="5feecde618d44937a9af2e33"] - the purple bar below. Link to comment
tuanphan Posted January 13, 2022 Share Posted January 13, 2022 On 1/12/2022 at 10:22 AM, ryan.eaton said: That menu is actually a html code I added to create a menu, its not the native squarespace nav bar. When a new page is added by the client the html code needs to be updated every time so it appears. I just want to know if I can move the native nav bar down. I was hoping for some kind of code to display the native navigation in section[data-section-id="5feecde618d44937a9af2e33"] - the purple bar below. Move this? 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
ferguswood Posted January 13, 2022 Share Posted January 13, 2022 On 4/17/2021 at 8:28 AM, tuanphan said: You mean this text? + SCROLL TO EXPLORE @tuanphan any suggestions on how to implement this text like they do in the example? Link to comment
tuanphan Posted January 16, 2022 Share Posted January 16, 2022 On 1/13/2022 at 10:11 PM, ferguswood said: @tuanphan any suggestions on how to implement this text like they do in the example? Add text only or clickable-text? Can you share link to your site? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment