tuanphan Posted January 8, 2021 Share Posted January 8, 2021 On 1/7/2021 at 7:13 AM, Tayloramy said: Hello! I am still new to squarespace! I am wanting to put the hamburger navigation with 3 lines on the left so my social links are on the right? Can anyone help with that? thank you! Edit Site Header > Header Layout > Select Layout: Navigation - Logo - Button 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
ehernandezkpg Posted January 10, 2021 Share Posted January 10, 2021 On 1/6/2021 at 9:59 AM, tuanphan said: Can you share site url? We can help easier. Can you share url? We can check easier https://snail-wombat-7nf7.squarespace.com/ pw: kennedy Link to comment
tuanphan Posted January 12, 2021 Share Posted January 12, 2021 On 1/5/2021 at 7:44 PM, ehernandezkpg said: Hi guys, I hate to add on to the questions but does anyone know how to get the burger menu with three lines and the actual word "menu" to the side or on top? Or can I just custom create a vector and upload and replace link from previous post about three lines? It's the LAST thing I need to finally publish the site 😞 Also, the old menu will flash when switching pages but only for a tiny bit, has anyone found the fix? Thank you Add to Design > Custom CSS .burger-box:before { content: "Menu"; color: white; display: block; position: relative; top: -20px; } 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
Daisysophia Posted January 17, 2021 Share Posted January 17, 2021 On 1/2/2021 at 6:39 PM, saltclo said: I have used the code to implement the hamburger menu, everything is working even with the social links and cart showing too. The problem I have ran in to is that the logo is not centered, with it being placed just slightly right of where it should be Can anyone help with this? Any update about center the logo? Would love to know too. Link to comment
tuanphan Posted January 18, 2021 Share Posted January 18, 2021 13 hours ago, Daisysophia said: Any update about center the logo? Would love to know too. Can you share your site 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
Daisysophia Posted January 18, 2021 Share Posted January 18, 2021 11 minutes ago, tuanphan said: Can you share your site url? its not active yet. Do you have any codes available to show here? Link to comment
Daisysophia Posted January 19, 2021 Share Posted January 19, 2021 Does anyone above have an answer onto center your logo again after inserting the Hamburger menu? Link to comment
saltclo Posted January 19, 2021 Share Posted January 19, 2021 24 minutes ago, Daisysophia said: Does anyone above have an answer onto center your logo again after inserting the Hamburger menu? Wanting to know this still too, the current code also removes the cart from mobile devices. Link to comment
tuanphan Posted January 20, 2021 Share Posted January 20, 2021 On 1/18/2021 at 5:55 PM, Daisysophia said: its not active yet. Do you have any codes available to show here? You can 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
tuanphan Posted January 20, 2021 Share Posted January 20, 2021 On 1/19/2021 at 6:49 PM, Daisysophia said: Does anyone above have an answer onto center your logo again after inserting the Hamburger menu? Can you share your site url + Which plan do you use? 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
Alexarr Posted January 22, 2021 Share Posted January 22, 2021 (edited) On 2/8/2020 at 9:50 AM, inside_the_square said: Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! .header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important} Hi there! I'm fairly new to Squarespace and sadly really out of practice with CSS. I was hoping you guys can help me, please? I've used to above CSS code from @inside_the_square to successfully get the three-line hamburger menu to show up on Desktop, but I was wondering how I could get that hamburger to: Display on the left-hand side of the header of the page; and Have the menu take up only a third (or about 33%) of the screen when it opens. I would also like to know how to get the site name/logo to appear on the right hand side of the page (or even the centre of the page), please, when my hamburger menu is on the left-hand side. I've used some of the other code suggestions throughout this great thread, but unfortunately only the one quoted above is working for me. Thank you all so much for your help! Here's a screenshot of what I have so far: Edited January 22, 2021 by Alexarr tagging Link to comment
saltclo Posted January 24, 2021 Share Posted January 24, 2021 (edited) Quote @tuanphan Please could you help & advise me on changes to code to allow the title logo to be centered as its slightly to the left currently, it isn't active on my page due to it not being correct. Thanks in advance @media screen and (max-width: 5000px) { /* Display burger icon at all widths and align left */ .header .header-burger { display: flex; order: 0 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Center logo in mobile device */ .header-title { text-align: center !important; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } } Edited January 24, 2021 by saltclo Link to comment
Daisysophia Posted January 24, 2021 Share Posted January 24, 2021 On 1/20/2021 at 3:12 PM, tuanphan said: You can setup password & share url https://carillon-buffalo-3jay.squarespace.com/config/pages Link to comment
tuanphan Posted February 1, 2021 Share Posted February 1, 2021 On 1/24/2021 at 4:58 AM, saltclo said: Please could you help & advise me on changes to code to allow the title logo to be centered as its slightly to the left currently, it isn't active on my page due to it not being correct. Thanks in advance @media screen and (max-width: 5000px) { /* Display burger icon at all widths and align left */ .header .header-burger { display: flex; order: 0 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Center logo in mobile device */ .header-title { text-align: center !important; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } } Hi. Can you share site url? On 1/24/2021 at 11:34 AM, Daisysophia said: https://carillon-buffalo-3jay.squarespace.com/config/pages Do you still need help 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
saltclo Posted February 1, 2021 Share Posted February 1, 2021 8 hours ago, tuanphan said: Hi. Can you share site url? Do you still need help on this? https://antelope-sealion-ctl2.squarespace.com/ Link to comment
tuanphan Posted February 3, 2021 Share Posted February 3, 2021 On 2/1/2021 at 3:55 AM, saltclo said: https://antelope-sealion-ctl2.squarespace.com/ It looks centered here? 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
KeraG Posted February 12, 2021 Share Posted February 12, 2021 On 1/22/2020 at 5:19 AM, rsmith3074 said: Hey! I'm using the new Squarespace 7.1 and am having some troubles finding any info on making the nav break at a certain point to enable the mobile hamburger icon for desktop. I don't want their typical nav for desktop, just wanting to have the hamburger icon across all devices. Thanks for any help! https://chameleon-porcupine-c7jc.squarespace.com/ password: 1234 Hi @tuanphan! I'm having the same problem. I'm using Riley on the new Squarespace and the code doesn't seem to work. Is there an updated code? My temporary website is https://strawberry-manatee-x48j.squarespace.com/ Thank you so much! Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/12/2021 at 6:38 PM, KeraG said: Hi @tuanphan! I'm having the same problem. I'm using Riley on the new Squarespace and the code doesn't seem to work. Is there an updated code? My temporary website is https://strawberry-manatee-x48j.squarespace.com/ Thank you so much! Your site is private. You can setup password & share url again. 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
MadsP Posted February 21, 2021 Share Posted February 21, 2021 (edited) On 2/7/2020 at 11:50 PM, inside_the_square said: Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! .header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important} Thank you! Awesome! Only – nothing happens as I click it! 😮 @inside_the_square & @tuanphan This is the dev-link for my site: https://bell-radish-wryh.squarespace.com As you see I added an image icon as the burger menu. Maybe the issue is linked to that? Here is the code for it: .burger-inner:after { content: ""; background-image: url(https://static1.squarespace.com/static/602a4403aeefe23588ad8344/t/6032c02eae17b8724c92b2a8/1613938734180/ActionBurgerArtboard+13png.png); background-size: contain; background-repeat: no-repeat; background-position: left; background-color: transparent !important; display: block; width: 70px; height: 35px; padding-right: 0px; } .burger-inner>div { display: none !important; } Edited February 21, 2021 by MadsP Needed more info. Link to comment
tuanphan Posted February 22, 2021 Share Posted February 22, 2021 11 hours ago, MadsP said: Thank you! Awesome! Only – nothing happens as I click it! 😮 @inside_the_square & @tuanphan This is the dev-link for my site: https://bell-radish-wryh.squarespace.com As you see I added an image icon as the burger menu. Maybe the issue is linked to that? Here is the code for it: .burger-inner:after { content: ""; background-image: url(https://static1.squarespace.com/static/602a4403aeefe23588ad8344/t/6032c02eae17b8724c92b2a8/1613938734180/ActionBurgerArtboard+13png.png); background-size: contain; background-repeat: no-repeat; background-position: left; background-color: transparent !important; display: block; width: 70px; height: 35px; padding-right: 0px; } .burger-inner>div { display: none !important; } What is access password? 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 Posted March 6, 2021 Share Posted March 6, 2021 On 3/2/2021 at 8:59 PM, KeraG said: Hi @tuanphan Here's our updated website: https://nestologystudio.squarespace.com/ pw: kB39gwHAP This is the code I use that doesn't work Thank you so much! // Burger menu @media screen and (max-width: 5000px) { /* Display burger icon at all widths and align left */ .header .header-burger { display: flex; order: 0 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Center logo in mobile device */ .header-title { text-align: center !important; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } } Hi.Burger looks fine here. Did you solve it? 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
junecz Posted March 31, 2021 Share Posted March 31, 2021 Hi @tuanphan and others - thanks for your input on this. I'm using the following code - works well except that the links line spacing is huge and I can't figure out how to reduce it. Can you help me fix it? TIA! site: https://czebrastudios-not-for-nothing.squarespace.com/ pw: philly @media screen and (max-width: 5000px) { /* Display burger icon at all widths and align left */ .header .header-burger { display: flex; order: 0 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } } /* Link Alignment */ .header-menu-nav {text-align: right!important; margin-right: 5%!important;} /* Page Background color */ .header-menu-bg {background: rgba(51,28,25,.85)!important;} /* menu links style */ .header-menu-nav-item a {color: white!important; line-height: 0px!important; font-size: 20px !important; padding: 2px !important; } cami_leisk 1 Link to comment
junecz Posted April 1, 2021 Share Posted April 1, 2021 Me again... 🙂 I fixed my spacing issue. Now: can I remove the menu scroll bar? For others looking for help: to fix the spacing I changed padding: 2px to margin: 2vw 0vw site: https://czebrastudios-not-for-nothing.squarespace.com/ pw: philly Link to comment
tuanphan Posted April 5, 2021 Share Posted April 5, 2021 On 4/1/2021 at 10:42 AM, junecz said: Me again... 🙂 I fixed my spacing issue. Now: can I remove the menu scroll bar? For others looking for help: to fix the spacing I changed padding: 2px to margin: 2vw 0vw site: https://czebrastudios-not-for-nothing.squarespace.com/ pw: philly Hi. Add to Design > Custom CSS /* Remove overlay scrollbar */ @media screen and (min-width:768px) { .header-menu-nav-folder.header-menu-nav-folder--active { overflow: hidden; } } 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
junecz Posted April 12, 2021 Share Posted April 12, 2021 Awesome. Scroll bar gone! Thanks once again, @tuanphan! 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