Jump to content

Vertical logo & different navigation style on landing page

Recommended Posts

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:

982407133_ScreenShot2021-10-15at3_01_25PM.thumb.png.55d081ec87043473cde31ba9c1684d1c.png

 

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! 

Edited by ysong
Link to comment
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:

982407133_ScreenShot2021-10-15at3_01_25PM.thumb.png.55d081ec87043473cde31ba9c1684d1c.png

 

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

Edited by bangank36

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

My testing result

 

image.png

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

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?

 

image.thumb.png.61d80ba0612c65ee059e0bbe08be1893.png

Link to comment

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

Edited by bangank36

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

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.