Jump to content

Header Customization (video background overlay, anchor links, center multiple elements)

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)

Hello, I'm trying to achieve this specific look for my hero section (see attached image below).

I want the logo and the button centered beside each other, and is responsive even on mobile.

I would also like to add 2 anchor links on both sides of the header that jump to respective sections on the same page.

Third thing is that to add a gradient overlay so that the video background fades into the second white section. I tried many different codes but still can't manage to execute it 😕

Is this achievable with Squarespace? Thank you so much in advance!

 

Site: https://www.designedbycarolyn.co/home
 

 

Screenshot 2024-06-04 at 2.08.03 PM.png

Edited by designedbycarolyn
Added extra question
Link to comment
  • designedbycarolyn changed the title to Header Customization (video background overlay, anchor links, center multiple elements)
  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

I can help you with these, if you still want to continue, let me know, I will give you code

  • I want the logo and the button centered beside each other, and is responsive even on mobile.
  • I would also like to add 2 anchor links on both sides of the header that jump to respective sections on the same page.

I can't help with this

  • Third thing is that to add a gradient overlay so that the video background fades into the second white section. I tried many different codes but still can't manage to execute it 😕

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
21 hours ago, tuanphan said:

I can help you with these, if you still want to continue, let me know, I will give you code

  • I want the logo and the button centered beside each other, and is responsive even on mobile.
  • I would also like to add 2 anchor links on both sides of the header that jump to respective sections on the same page.

I can't help with this

  • Third thing is that to add a gradient overlay so that the video background fades into the second white section. I tried many different codes but still can't manage to execute it 😕

Hello! Yes that would be amazing! I got the gradient overlay figured out!! 😄

Link to comment

@tuanphan Sorry if you don't mind me asking another question, would you kindly let me know how I can bring the dove with rose illustration on top of the section on the right? I have attached an image for reference but I have achieved a sticky split section for those 2 sections in the image. And I have used float-right with margin-right: -40% to achieve the effect of the illustration going off of the section. However, I want the illustration to sit on top of the adjacent section on the left so that it is visible. I'm not sure how I can achieve this, I have even even tried playing with the overflow but nothing seems to work 😞 Thank you so much!!!

Screenshot 2024-06-07 at 8.36.34 AM.png

Link to comment
  • Solution
On 6/7/2024 at 7:40 AM, designedbycarolyn said:

@tuanphan Sorry if you don't mind me asking another question, would you kindly let me know how I can bring the dove with rose illustration on top of the section on the right? I have attached an image for reference but I have achieved a sticky split section for those 2 sections in the image. And I have used float-right with margin-right: -40% to achieve the effect of the illustration going off of the section. However, I want the illustration to sit on top of the adjacent section on the left so that it is visible. I'm not sure how I can achieve this, I have even even tried playing with the overflow but nothing seems to work 😞 Thank you so much!!!

Screenshot 2024-06-07 at 8.36.34 AM.png

You can use this code to Custom CSS box.

section[data-section-id="6661447f7e5542291edb54cf"] {
    z-index: 999999 !important;
}

image.thumb.png.331f0696feffa0a49619d4c27b223cb2.png

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
18 hours ago, tuanphan said:

You can use this code to Custom CSS box.

section[data-section-id="6661447f7e5542291edb54cf"] {
    z-index: 999999 !important;
}

image.thumb.png.331f0696feffa0a49619d4c27b223cb2.png

Thank you so much!!! XD Will start using the trick from now on! How can I get you a cup of coffee? 🙂

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.