KariLivs Posted December 10, 2019 Share Posted December 10, 2019 Hello! Pardon me if this has already been asked before, but is there a way to move the navigation to the side instead of on top in 7.1, or to create a hamburger menu? I find the simple layout, though effective, is very restrictive in terms of creating original designs. Would I just CSS to style the navigation instead? I hope this is something that is going to be developed in the near future! Link to comment
tuanphan Posted December 11, 2019 Share Posted December 11, 2019 Can you share link to your site? 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
VMoritz Posted June 3, 2020 Share Posted June 3, 2020 I have the same question. I thought I could change templates but I've spent 2 days building the site before realising that 7.1 will not allow this. I either need to add more space across the top navigation section- somehow-or it seems I need to start again. Plus adding tables looks like I will need to use a code generator. I joined Squarespace to get away from my rudimentary knowledge of Dreamweaver- not happy! And I can't seem to remove excess spacing between sections- S,M,L isn't enough yellow-turquoise-4raf.squarespace.com Link to comment
tuanphan Posted June 4, 2020 Share Posted June 4, 2020 On 6/3/2020 at 12:10 PM, VMoritz said: I have the same question. I thought I could change templates but I've spent 2 days building the site before realising that 7.1 will not allow this. I either need to add more space across the top navigation section- somehow-or it seems I need to start again. Plus adding tables looks like I will need to use a code generator. I joined Squarespace to get away from my rudimentary knowledge of Dreamweaver- not happy! And I can't seem to remove excess spacing between sections- S,M,L isn't enough yellow-turquoise-4raf.squarespace.com Your site is private. Can you setup password & share url? 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
COMMUN Posted July 22, 2020 Share Posted July 22, 2020 Site URL: https://www.commun.space/ Hey, I really need a navigation side bar to link my content on a specific page of my site. Is there a way to do this in 7.1? Thanks!! Link to comment
derricksrandomviews Posted July 22, 2020 Share Posted July 22, 2020 Only on one page? I doubt it. Link to comment
LaurenD Posted March 23, 2021 Share Posted March 23, 2021 Site URL: https://www.laurendenitzio.com I'm currently using the Wells theme in 7.0 and the mobile menu is terrible for my current navigation setup. I wanted to switch to 7.1 to have more options to customize the mobile nav, but I don't see any easy way to have a sidebar navigation like there is in Wells. Is it possible to do that without a lot of coding? I'm capable of doing that, but am pretty annoyed that I'm having to rebuild an entire site AND custom code a side nav just to get a mobile navigation display that's not awful. I basically just want to build a site using 7.1 that looks like my current site but with a mobile navigation that will collapse folders. Thank you! Any help would be much appreciated! Beyondspace 1 Link to comment
LaurenD Posted March 23, 2021 Share Posted March 23, 2021 1 minute ago, bangank36 said: Try this article with pure css help Vertical Navigation in Squarespace 7.1 | Rebecca Grace (rebeccagracedesigns.com) Thanks for the link but I actually want a sidebar and not a vertical menu. I'd like the text displayed horizontally as it normally is, but stacked on top of each other like a list. Link to comment
Jordy_TheShop Posted October 25, 2021 Share Posted October 25, 2021 Hi there, I'm trying to create a Sidebar Nav in 7.1. The way I'm approaching this is by using a Transparent Fixed Header with all nav links in the header left aligned. I'm almost there, however the final issue I have is I need to 'stack' the navigation elements down the side so the sidebar doesn't overlap the page content. I'm building this effect to be on desktop and tablet only. Site URL: carnation-parsnip-br2g.squarespace.com PW: abc123 I've got the following code so far: //HEADER STYLING START// .header-title-text { text-align: left; } .header-title-nav-wrapper { margin-left: 0 !important; } .header-nav { text-align: left !important; } @media screen and (min-width: 800px) { .header { background: transparent!important; } } //HEADER STYLING END// Any help would be much appreciated, and if anyone has any comments on the functionality or better ways to achieve this look please let me know – I'm still new to CSS. Thanks, Jordy 🙂 Link to comment
Beyondspace Posted October 26, 2021 Share Posted October 26, 2021 (edited) On 10/25/2021 at 11:31 AM, Jordy_TheShop said: Hi there, I'm trying to create a Sidebar Nav in 7.1. The way I'm approaching this is by using a Transparent Fixed Header with all nav links in the header left aligned. I'm almost there, however the final issue I have is I need to 'stack' the navigation elements down the side so the sidebar doesn't overlap the page content. I'm building this effect to be on desktop and tablet only. Site URL: carnation-parsnip-br2g.squarespace.com PW: abc123 I've got the following code so far: //HEADER STYLING START// .header-title-text { text-align: left; } .header-title-nav-wrapper { margin-left: 0 !important; } .header-nav { text-align: left !important; } @media screen and (min-width: 800px) { .header { background: transparent!important; } } //HEADER STYLING END// Any help would be much appreciated, and if anyone has any comments on the functionality or better ways to achieve this look please let me know – I'm still new to CSS. Thanks, Jordy 🙂 I 've made some Css code to arrange your header Does it meet your expect? Edited October 26, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted October 26, 2021 Share Posted October 26, 2021 (edited) If it 's your desired result, you can add the following codes to Home > Design > Custom Css @media only screen and (min-width: 800px) { .header-announcement-bar-wrapper { position: fixed !important; top: 0; left: 0; bottom: 0; width: 200px !important; padding-right: 0 !important; } .header-display-desktop { display: block; } .header-nav .header-nav-list { flex-direction: column; } } Let me know if it works property on your site Support me by pressing 👍 if this useful for you Edited October 26, 2021 by bangank36 Jordy_TheShop 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Jordy_TheShop Posted October 28, 2021 Share Posted October 28, 2021 On 10/26/2021 at 5:15 PM, bangank36 said: If it 's your desired result, you can add the following codes to Home > Design > Custom Css @media only screen and (min-width: 800px) { .header-announcement-bar-wrapper { position: fixed !important; top: 0; left: 0; bottom: 0; width: 200px !important; padding-right: 0 !important; } .header-display-desktop { display: block; } .header-nav .header-nav-list { flex-direction: column; } } Let me know if it works property on your site Support me by pressing 👍 if this useful for you Hey! Thanks for your help. I managed to solve the problem by using a section of your code. This is the part I used: @media only screen and (min-width: 768px) { .header-nav .header-nav-list { flex-direction: column; } } When I used the rest of the code, the header items were pushed over to the left of page even on larger monitors. As the rest of the website content width is quite narrow, this looked a little off (I preferred to keep the header width narrow as well). I hope this makes sense – in summary your code helped solve my issue. Thanks, Jordy! Link to comment
skali Posted October 29, 2021 Share Posted October 29, 2021 I'm wondering if there is any way to create a fixed side navigation menu that is somewhat similar to the one on http://amberinteriordesign.com/ in 7.1? Thanks! Link to comment
tuanphan Posted October 31, 2021 Share Posted October 31, 2021 Hi. Fixed site navigation or fixed site navigation + burger effect? (click burger >> nav appear)? 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
MoonMama Posted February 8, 2022 Share Posted February 8, 2022 Why isn't anyone helping with this issue of a side navigation for 7.1? There are many forum posts asking this same question and no one ever answers. How do you get a left side navigation on 7.1? I'd like on all pages for https://www.tribeandsol.com Link to comment
MoonMama Posted February 8, 2022 Share Posted February 8, 2022 On 3/22/2021 at 9:24 PM, LaurenD said: Thanks for the link but I actually want a sidebar and not a vertical menu. I'd like the text displayed horizontally as it normally is, but stacked on top of each other like a list. I've been trying to figure out the same and can't seem to find a plug in or help. The question is never answered in many forum posts. Trying to achieve this for https://www.tribeandsol.com Link to comment
MoonMama Posted February 8, 2022 Share Posted February 8, 2022 Hi, I also need help with the above same as you mentioned for https://www.tribeandsol.com Link to comment
tuanphan Posted February 18, 2022 Share Posted February 18, 2022 On 2/8/2022 at 2:00 PM, MoonMama said: Hi, I'm needing help with the same but this code didn't work for me https://www.tribeandsol.com Do you still need help? I remember there is a course on 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
EmilyDo Posted May 31, 2022 Share Posted May 31, 2022 Hi @tuanphan, could you please share the code or course to learn how to move the main navigation to the left side of the page in squarespace 7.1? I've patched together a code that mostly achieves this, but it isn't fully creating the look I want. I'm still learning how to understand and manipulate code, so I appreciate any assistance in this matter! Link to comment
tuanphan Posted June 1, 2022 Share Posted June 1, 2022 9 hours ago, EmilyDo said: Hi @tuanphan, could you please share the code or course to learn how to move the main navigation to the left side of the page in squarespace 7.1? I've patched together a code that mostly achieves this, but it isn't fully creating the look I want. I'm still learning how to understand and manipulate code, so I appreciate any assistance in this matter! See this https://rebeccagracedesigns.teachable.com/p/vertical-navigation EmilyDo 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
cro0w Posted June 7, 2023 Share Posted June 7, 2023 Why are people gate keeping something so simple? Tumblr has been doing this forever. What's going on Squarespace come oooooooooon. Bramble 1 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