Vertical logo & different navigation style on landing page

Site URL: https://theharper.squarespace.com/

Hi!

PW to site: theharpernyc

A couple things I am trying to achieve using custom css that would appear only on the landing page:
1. Logo would be vertical and flush left. Would be responsive to the size of the window. 
2. The navigation (will only have two pages linked) would be right above the vertical logo. 

I was able to flip the logo to it's side using this code:

  #header .header-title-logo {     
    position: fixed;     
    transform: rotate(90deg);
    background-color: white;
    padding:25px;
  }  
 

However I would like to make it full height and flushed left without cutting into the image.

This is what I am trying to achieve:

If anyone can help point me in the right direction of how to achieve this that would be amazing. Even if it's ideas.

Thanks in advance! 

Try this CSS

@media screen and (min-width:768px) {
.homepage #header .header-title-logo {
    position: fixed;
    transform: rotate(
90deg);
    background-color: #edeae3;
    padding: 25px;
    left: -7vw;
    top: 15vw;
}
}

On 10/16/2021 at 2:31 AM, ysong said:

Site URL: https://theharper.squarespace.com/

Hi!

PW to site: theharpernyc

A couple things I am trying to achieve using custom css that would appear only on the landing page:
1. Logo would be vertical and flush left. Would be responsive to the size of the window. 
2. The navigation (will only have two pages linked) would be right above the vertical logo. 

I was able to flip the logo to it's side using this code:

  #header .header-title-logo {     
    position: fixed;     
    transform: rotate(90deg);
    background-color: white;
    padding:25px;
  }  
 

However I would like to make it full height and flushed left without cutting into the image.

This is what I am trying to achieve:

 

If anyone can help point me in the right direction of how to achieve this that would be amazing. Even if it's ideas.

Thanks in advance! 

Here is an additional solution to change your page with vertical image logo

#collection-6169d119a4ea2214067a1a65 {
	.header-title-logo {
		top: 0;
		left: 0;
		height: 100%;
		transform: unset !important;
		width: 220px;
		position: fixed !important;
		display: flex;
		justify-content: center;
		align-items: center;
		>a {
			position: absolute;
			display: block;
			transform: rotate( 90deg);
			img {
				max-width: unset;
				max-height: 70px;
				width: 100%;
			}
		}
	}
	.header-nav-list {
		.header-nav-item {
			z-index: 999;
		}
	}
}
.header-nav-list {
	.header-nav-item {
		a {
			color: #9D9D9D !important;
		}
	}
}

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

My testing result

@bangank36

Thank you so much! This worked great!

A few follow up questions:

1. Is it possible to make this code only visible on the desktop version?

2. How would I make the logo be full height on the desktop version? (including screenshot)

3. How would I make sure the 2 navigation links are centered to the solid color area?

You can replace my previous codes with the below ones to apply only in desktop version

@media only screen and (min-width: 800px) {
  #collection-6169d119a4ea2214067a1a65 .header-title-logo {
    top: 0;
    left: 0;
    height: 100%;
    transform: unset !important;
    width: 220px;
    position: fixed !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #collection-6169d119a4ea2214067a1a65 .header-title-logo > a {
    position: absolute;
    display: block;
    transform: rotate(90deg);
  }

  #collection-6169d119a4ea2214067a1a65 .header-title-logo >a img {
    max-width: unset;
    max-height: 100%;
    width: 100%;
  }
  #collection-6169d119a4ea2214067a1a65 .header-nav-list .header-nav-item {
    z-index: 999;
  }
  #collection-6169d119a4ea2214067a1a65 .header-nav-list .header-nav-item a {
    color: #9d9d9d !important;
  }
  #collection-6169d119a4ea2214067a1a65 .header-title-logo {
    background-color: #edeae3;
  }
}

I am checking the 2 remaining points