kaydotjpg Posted March 15, 2023 Share Posted March 15, 2023 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 Link to comment
Ziggy Posted March 15, 2023 Share Posted March 15, 2023 This might be a good starting point: https://www.ghostplugins.com/free-plugins/vertical-navigation-solid-version tuanphan 1 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
tuanphan Posted March 18, 2023 Share Posted March 18, 2023 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? 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
kaydotjpg Posted March 20, 2023 Author Share Posted March 20, 2023 (edited) @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 March 20, 2023 by kaydotjpg Link to comment
tuanphan Posted March 25, 2023 Share Posted March 25, 2023 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? 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
kaydotjpg Posted March 26, 2023 Author Share Posted March 26, 2023 @tuanphan yes!! Just like that, but of course the text being vertical. Down below are 2 mock ups that I would be happy to achieve, either way. Link to comment
Solution tuanphan Posted March 30, 2023 Solution Share Posted March 30, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment