WebShark Posted July 11, 2023 Share Posted July 11, 2023 Hello Is it possible to have the navigation vertical and left-aligned? I only have access to CSS 🙂 Thank you very much in advance! Link to comment
KwameAndCo Posted July 11, 2023 Share Posted July 11, 2023 If you want it to be a "true" navigation, i.e. accessible for screen readers etc, you're going to need a fair bit of CSS and it's going to be a bit of a headache tbh. You could try something like Rebecca Grace's code but it may not be what you're looking for. Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 For Custom Plugins email me 🧩 Link to comment
tuanphan Posted July 15, 2023 Share Posted July 15, 2023 Do you have an example + site url? We can help easier 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
WebShark Posted July 15, 2023 Author Share Posted July 15, 2023 Hello Thank you to your both! I tried with Rebecca Grace's code and it almost worked! However it made the whole header go vertical and not just the navigation. The navigation should also be left-aligned. Do you know what to change in the code? Code: @media only screen and (min-width: 991px) { .page-section:first-of-type { padding-top: 0px !important; } .page-section { margin-right: 100px; } #header { width: 100px; position: fixed; height: 100vh; z-index: 99999 !important; display: table; writing-mode: vertical; text-orientation: mixed; } .header .header-announcement-bar-wrapper { padding: 10px 30px 10px 10px; } .header-inner { height: 100vh; display: table-cell; vertical-align: middle; text-align: left; /* Add this line to align the text to the left */ } } The url is https://porpoise-keyboard-td6m.squarespace.com/ and pw is squarespace Thank you very much! Have a nice day 🙂 jjohansson 1 Link to comment
tuanphan Posted July 16, 2023 Share Posted July 16, 2023 You mean do 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
WebShark Posted July 17, 2023 Author Share Posted July 17, 2023 Yes exactly! That should be as a left navigation instead and also left-aligned 🙂 Link to comment
MayaViolet Posted July 19, 2023 Share Posted July 19, 2023 .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 0 0 100%; } .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav { text-align: left; } .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-list { justify-content: left; flex-direction: column; text-align: left; } Try the above - Not sure if that is your final preferred outcome? WebShark and tuanphan 2 Link to comment
MayaViolet Posted July 19, 2023 Share Posted July 19, 2023 (you may need to apply "!important" after the properties if the code isn't sticking) Link to comment
WebShark Posted July 19, 2023 Author Share Posted July 19, 2023 Hi! Thank you very much! This is so close to what we wish for! The navigation should be going more down the site to the left. I did not really describe this well before, I am sorry. Is this solution possible? 🙂 Thank you once again! Link to comment
MayaViolet Posted July 19, 2023 Share Posted July 19, 2023 3 hours ago, WebShark said: Hi! Thank you very much! This is so close to what we wish for! The navigation should be going more down the site to the left. I did not really describe this well before, I am sorry. Is this solution possible? 🙂 Thank you once again! Yes, solution is definitely possible but I think we need to clarify a few more design details first 🙂 Do you want the navigation to sit fixed on the left side of your site content, meaning it stays present even as users scroll down the page? To do so, we would need to target the header-nav and place it on the left side, but also add a left-margin to the entire site's page content, so they don't overlap. If you can provide your big-picture vision, that would help us be able to develop and share accurate code! Link to comment
WebShark Posted July 19, 2023 Author Share Posted July 19, 2023 Hello, thank you very much for your response! It would be nice with a sticky left navigation 🙂 Please let me know if you need anything more from me! 🙂 Link to comment
Solution MayaViolet Posted July 19, 2023 Solution Share Posted July 19, 2023 @WebShark Ok, the first step would be to set your header style to "Fixed" as referenced here. Then, try applying the follow CSS: /*--- Header Navigation - Fixed Left ---*/ @media all and (min-width: 768px) { /* Navigation Position */ .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav { margin: 0; position: fixed; left: 0; top: 100px; width: 15vw; } .header-nav-list>div { white-space: inherit; } /* Page Content Width */ main#page { width: 85vw; margin-left: auto; } } Lmk how that works! jjohansson and tuanphan 1 1 Link to comment
WebShark Posted July 20, 2023 Author Share Posted July 20, 2023 Yes, this worked, thank you so much! 🙌 Take care! 🙂 MayaViolet 1 Link to comment
NashJ Posted August 9 Share Posted August 9 i want to do this to my site too. where are you inputting that code? Link to comment
MayaViolet Posted August 9 Share Posted August 9 43 minutes ago, NashJ said: i want to do this to my site too. where are you inputting that code? @NashJ you can follow these instructions to access the CSS editor: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor Link to comment
paul2009 Posted August 24 Share Posted August 24 On 8/9/2024 at 6:51 PM, NashJ said: i want to do this to my site too. where are you inputting that code? @NashJ The CSS in the accepted solution requires the header style with centred branding to be active. If you have chosen a different header layout, you'll need to remove .header-layout-branding-center-nav-center from the selectors. jjohansson 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
jjohansson Posted September 28 Share Posted September 28 (edited) Hello @MayaViolet and @paul2009 Im trying to adapt this code to a site, I need help with the Desktop version in order to: - Align of the Logo to the left of the page - Menu items aligned with the start of the logo (learn how to move them up, down, left or right.) - Set the same background color of the site (I get by default white) Here is a test site: https://hughgordon-test.squarespace.com Password: 2024 Edited September 29 by jjohansson Link to comment
tuanphan Posted September 30 Share Posted September 30 On 9/29/2024 at 3:39 AM, jjohansson said: This is the Menu ubication im looking for... Try this to Website Tools > Custom CSS @media screen and (min-width:992px) { .header-title { position: fixed; top: 3vw; left: 2vw; z-index: 9999; text-align: left !important; } .header-nav { position: fixed; top: 10vw; left: 2vw; padding: 0 !important; } nav { flex-direction: column; } div.header-nav-item { margin: 0 !important; text-align: left !important; } div.header-nav-item a{ display: inline-block; } .header-actions.header-actions--right { position: fixed; left: 5vw; bottom: 2vw; justify-content: flex-start !important; } .header-actions--right .header-actions-action a { margin-left: 0 !important; margin-right: 2.5vw; } #page article section { max-width: 75%; margin-left: 25%; padding-top: 0 !important; } header#header { background-color: transparent !important; } } jjohansson 1 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
recycledfashion Posted October 7 Share Posted October 7 Also, when I used the code above, it squished everything else on my page over to the right. I want the navigation to exist over my section if possible? Laid on top of it versus next to it. jjohansson 1 Link to comment
tuanphan Posted October 9 Share Posted October 9 On 10/7/2024 at 10:19 PM, recycledfashion said: Hello, I am trying to do the exact same thing to my website. I would like a vertical, left aligned navigation menu. It seems like I've tried every code on every forum, but none have worked and there's no squarespace template with a left aligned navigation menu in 7.1, frustratingly. If there is one, I'd love to know! I used text blocks to show what it should look like. When I tried the code above, this is what happened, shown in the second image. There is white space behid the navigation and the navigation titles are spread apart strangely. The third image shows what the site's navigation currently looks like. Can you share site url? On 10/7/2024 at 10:21 PM, recycledfashion said: Also, when I used the code above, it squished everything else on my page over to the right. I want the navigation to exist over my section if possible? Laid on top of it versus next to it. You can remove this code jjohansson 1 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
Kolja Posted 6 hours ago Share Posted 6 hours ago I used the same code, but the logo is moving to the left together with the navigation text. How can I keep the logo in the middle, while the navigation stays on the left? 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