Jump to content

Make the header 50% width and transparent over a split section.

Recommended Posts

Site URL: https://oleander-gerbil-s663.squarespace.com/home-split


I'm mocking up a template for a cosmetics brand.  I am using split sections and id like the header to only go across the left side section. 50% width works for this but then i need it to be transparent over the background image section.  The main issue is when i do the transparent header it only starts to show on scroll.  The other issue i have is that i would like the nav links to display as a block at the bottom left side of the page.  also with a transparent background.   I have tried making the header 50% width and 100Vh height. I doesn't work.  

Any advice would be greatly appreciated. 

this is what i mean by the nav links - but i would like the logo just on left hand side.




this is the code i have that's not working. It just shoves it all down the page.... 

.header {
  background-color:transparent !important;
  z-index: 99999;
  top: 0;
  left: 0;
  	display: flex;
	flex-direction: column;
	align-items: left;
	justify-content: space-between;
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

It looks like you have figured it out. Do you still need help?


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 plugin
If 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

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.