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

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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, Keyword Highlighter
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

My testing result

 

image.png

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, Keyword Highlighter
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

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

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, Keyword Highlighter
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.