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

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
 

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 😕

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!! 😄

@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!!!

18 hours ago, tuanphan said:

You can use this code to Custom CSS box.

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

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

On 6/11/2024 at 10:54 AM, designedbycarolyn said:

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

You can use link in my signature. Thank you.