Greenroom Posted October 5, 2022 Share Posted October 5, 2022 Site URL: https://www.bloom-skin-aesthetics.squarespace.com Hi, I am in need of a bit of help here. I am trying to establish a left hand sidebar navigation (rather than the top-horizontal layout currently included on my template). I have managed to get the navigation to sit over on the left side of the screen just below the logo, however I cannot get the Nav text to sit left-aligned (only the nav folder items). Can anyone help with this? Also is there a way to have this nav/menu disappear on scroll - stuck to the top of the page rather than being a scrolling overlay? This is what I have put together based on different threads I found - not sure if it is all relevant: /*vertical navigation*/ .header-nav { width:1%; position: fixed; padding-top: 15%; z-index: 1000; text-align: left !important; } /*nav text alignment*/ .header-nav-list a { text-align: left !important;} .header-nav-item a {text-align: left !important;} .header-nav-item--collection a {text-align: left !important;} Website: bloom-skin-aesthetics.squarespace.com P/word: Leah2022! Link to comment
Ziggy Posted October 6, 2022 Share Posted October 6, 2022 Add this to your Custom CSS (you may be able to condense into what you already have) .header-layout-nav-right .header-nav-list { justify-content: flex-start; } .header-layout-nav-right .header-nav { padding-left:0px; } .header-nav { top: 40px; } .header-layout-nav-right .header-nav-item:not(:first-child):not(.header-actions-action--cart) { margin-left: 0vw; } Please let me know if this works! tuanphan and Greenroom 2 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Greenroom Posted October 11, 2022 Author Share Posted October 11, 2022 On 10/6/2022 at 11:56 PM, Ziggy said: Add this to your Custom CSS (you may be able to condense into what you already have) .header-layout-nav-right .header-nav-list { justify-content: flex-start; } .header-layout-nav-right .header-nav { padding-left:0px; } .header-nav { top: 40px; } .header-layout-nav-right .header-nav-item:not(:first-child):not(.header-actions-action--cart) { margin-left: 0vw; } Please let me know if this works! Hi @Ziggy Thank you for your help on this one 🙂 I have added the code and tweaked the padding to enable the nav to sit just below the logo - It worked great apart from the folder dropdown visibility - Unfortunately the folder items are popping up off to the left side of the screen when I hover over them - Is there any way to edit this to have them appear in line/over the nav menu? Link to comment
Greenroom Posted October 11, 2022 Author Share Posted October 11, 2022 Also is there anyway to have it disappear on scroll? At the moment it is a permanent/floating menu 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