Jump to content

Vertical Split Navigation

Go to solution Solved by tuanphan,

Recommended Posts

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 3/15/2023 at 7:17 PM, kaydotjpg said:

Hi! 

I would love to create a vertical, split navigation. If you look at the site, I would like to have the name ("Tunika Onnekikami") vertical and on the left side of the screen, and the nav link ("Work", "About", and "Contact) vertical and on the right hand of the screen. Can someone help me with this? 

password: tunika

Like this?

image.thumb.png.95810656d687db611d425b100880c4f0.png

Add to Design > Custom CSS

nav.header-nav-list {
    flex-direction: column;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan @Ziggy  a little different! Here is are 2 examples of what I mean: site 1, site 2

So: Tunika Onnekikami (header) and About (nav link) on the left hand side. And Things I Like and Work on the right hand side. If this seems too tricky, I would be fine with just a vertical header with everything on the left hand side. However, the ghost plug in that @Ziggy sent does not allow the site title to be included, and I would like the site title to be included if I go this route. 

Edited by kaydotjpg
Link to comment
On 3/20/2023 at 9:15 PM, kaydotjpg said:

@tuanphan   a little different! Here is are 2 examples of what I mean: site 1, site 2

So: Tunika Onnekikami (header) and About (nav link) on the left hand side. And Things I Like and Work on the right hand side. If this seems too tricky, I would be fine with just a vertical header with everything on the left hand side. However, the ghost plug in thatsent does not allow the site title to be included, and I would like the site title to be included if I go this route. 

Move this?

image.thumb.png.377b0fe5d20c3292f76f9cc422789471.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

Add to Design > Custom CSS

@media screen and (min-width:768px) {
a#site-title {
    position: fixed;
    top: 50%;
    transform: rotate(90deg) translateY(-50%);
    left: -50px;
}
nav.header-nav-list {
    position: fixed;
    top: 50%;
    transform: rotate(90deg) translateY(-50%);
    flex-direction: column;
    right: 60px;
}
nav.header-nav-list>div:nth-child(1) {
    position: fixed;
    left: calc(~"50% - 100px");
}
nav.header-nav-list>div:nth-child(2) {
    position: fixed;
    left: calc(~"50% - 50px");
}
nav.header-nav-list>div:nth-child(3) {
    position: fixed;
    left: calc(~"50% + 50px");
}
nav.header-nav-list>div:nth-child(4) {
    position: fixed;
    left: calc(~"50% + 150px");
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.