rsmith3074 Posted January 21, 2020 Share Posted January 21, 2020 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 independenter and inside_the_square 2 Link to comment
tapingpolicies Posted January 27, 2020 Share Posted January 27, 2020 I’m looking for the same answer. Nothing to be found about this for the 7.1 version. Anyone? independenter 1 Link to comment
tuanphan Posted February 1, 2020 Share Posted February 1, 2020 You can try CSS for this. No Such Account The account you requested does not exist. Marins 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
inside_the_square Posted February 7, 2020 Share Posted February 7, 2020 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} Chele, haessel, KellyHeard and 6 others 6 3 Code queen and CSS behind InsideTheSquare.co 😃 Free CSS tutorials: insidethesquare.co/tutorials-for-squarespace🥳 Free 7.1 training course: itssevenone.com/training👍 CSS Cheat Sheet - codes for 7 & 7.1: insidethesquare.co/css📚 CSS for Squarespace course: customcodeacademy.com Link to comment
kiu Posted March 2, 2020 Share Posted March 2, 2020 On 2/7/2020 at 5: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} Hi! Inside the square, I love your yourtube channel. I use this CSS code. How do I center the logo afterwards? I tried the "Edit Site Header" but I get this ( see image) Link to comment
LuckyAndSon Posted March 24, 2020 Share Posted March 24, 2020 On 2/8/2020 at 8: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} Hey inside_the_square do you know how to make the hamburger menu display on the right hand side instead of left using this CSS in Squarespace 7.1? When I currently shrink the browser window the hamburger is jumping from the left to the right so I just need it on the right the whole time please. Link to comment
Guest Posted March 26, 2020 Share Posted March 26, 2020 (edited) Hey @tuanphan and @inside_the_square How can we add other styling details, such as changing the background colour and aligning the text left, changing the line spacing and text colour? I've tried adding things like background: #ffffff; but nothing is changing! Edited March 26, 2020 by nancydesign Link to comment
Guest Posted April 23, 2020 Share Posted April 23, 2020 Hi @nancydesignI have the same challenge for my website, please let me know if you found a way around this - thanks! Link to comment
tuanphan Posted April 24, 2020 Share Posted April 24, 2020 11 hours ago, user5475811 said: Hi @nancydesignI have the same challenge for my website, please let me know if you found a way around this - thanks! 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ivan-dabbles Posted May 3, 2020 Share Posted May 3, 2020 On 2/7/2020 at 2:50 PM, inside_the_square said: @inside_the_square Thanks so much for sharing! When I do as you suggested, it pushes the logo to strange spots in the header (as it did with others). In my case, the logo is meant to be centered. Any ideas on that? Would also LOVE to move the hamburger to the right side if anybody knows how to do that. .header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important} Link to comment
jjjuliejj Posted May 18, 2020 Share Posted May 18, 2020 Agree with iannoli -- does anyone have code to fix the floating header issue? Thanks! Link to comment
MartyMeh Posted May 28, 2020 Share Posted May 28, 2020 On 3/26/2020 at 6:20 PM, nancydesign said: Hey @tuanphan and @inside_the_square How can we add other styling details, such as changing the background colour and aligning the text left, changing the line spacing and text colour? I've tried adding things like background: #ffffff; but nothing is changing! I have a similar issue to @nancydesign I think. I can't work out how to control the background colour of the hamburger navigation. My white logo gets lost on the white background. Link to comment
JOHNMD Posted May 28, 2020 Share Posted May 28, 2020 (edited) @MartyMeh To style on version 7.1. Link Alignment: .header-menu-nav {text-align: left!important; margin-left: 15%!important;} Page Background color: .header-menu-bg {background: red!important;} Add image as background to Page: (replace with your image.) .header-menu-bg {background-image: url('https://static1.squarespace.com/static/5e04314e1e03733084a0d51a/t/5ece9831d9f131439a22411a/1590598888064/Cork-City-Centre-at-Night.png'); background-repeat: no-repeat; background-size: cover;} Space between links: .header-menu-nav-item {line-height: 20px!important;} Link text : .header-menu-nav-item > a {color: green!important;} Floating header is set in the Header Edit option. Select Style > and toggle to Fixed. - John Edited May 28, 2020 by JOHNMD Ad7am, drumoto and cami_leisk 3 mcgouran.john@gmail.com Link to comment
jjjuliejj Posted June 8, 2020 Share Posted June 8, 2020 So if I wanted a hamburger menu across all devices on the left side and my logo fixed in the center, what would the code be? Header Edit --> Style --> Fixed does not address the issue of the floating logo with the current CSS code. The current CSS breaks the existing centered logo when "fixed" is toggled on. Thanks. Link to comment
Asiya Posted June 20, 2020 Share Posted June 20, 2020 @inside_the_square what if i want the humberger sign to have three lines? this code produces two lines humberger. Link to comment
Asiya Posted June 20, 2020 Share Posted June 20, 2020 @tuanphan what if i want the humberger sign to have three lines? this code produces two lines humberger. Link to comment
tuanphan Posted June 22, 2020 Share Posted June 22, 2020 On 6/20/2020 at 2:10 PM, Asiya said: @tuanphan what if i want the humberger sign to have three lines? this code produces two lines humberger. You can replace burger icon with custom three lines (here is an example img) Add to Home > Design > Custom CSS. Replace current image with three lines icon url .burger-box div { display: none; } .burger-box { background-image: url(https://static.thenounproject.com/png/3143942-42.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } gallop, gcart, Ad7am and 1 other 3 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted June 23, 2020 Share Posted June 23, 2020 On 6/20/2020 at 2:10 PM, Asiya said: @tuanphan what if i want the humberger sign to have three lines? this code produces two lines humberger. You can replace burger with three lines icon Add to Home > Design > Custom CSS .burger-box div { display: none; } .burger-box { background-image: url(https://image.flaticon.com/icons/svg/876/876207.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; } Ad7am 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted June 23, 2020 Share Posted June 23, 2020 On 6/20/2020 at 2:10 PM, Asiya said: @tuanphan what if i want the humberger sign to have three lines? this code produces two lines humberger. Add to Home > Design > Custom CSS .burger-box div { display: none; } .burger-box { background-image: url(https://image.flaticon.com/icons/svg/876/876207.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
StudioRhodes Posted July 23, 2020 Share Posted July 23, 2020 @tuanphan & @inside_the_square Is there a way to add animation to the menu? If I want it to slide out from the left side of the screen once I click the 3 lines? Link to comment
tuanphan Posted July 24, 2020 Share Posted July 24, 2020 23 hours ago, StudioRhodes said: @tuanphan & @inside_the_square Is there a way to add animation to the menu? If I want it to slide out from the left side of the screen once I click the 3 lines? Complex. WorkplaceConsultant 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
mache Posted July 28, 2020 Share Posted July 28, 2020 On 2/7/2020 at 4: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} Hi! How can I show the social media icons afterwards? They seem to dissappear. Link to comment
tuanphan Posted July 28, 2020 Share Posted July 28, 2020 6 hours ago, mache said: Hi! How can I show the social media icons afterwards? They seem to dissappear. Can you share link to your site? We can check easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
butterycash Posted August 21, 2020 Share Posted August 21, 2020 Awesome thread. Thanks. What if I wanted the three line hamburger icon to switch to an 'X' after clicked and menu has appeared? Link to comment
tuanphan Posted August 22, 2020 Share Posted August 22, 2020 14 hours ago, butterycash said: Awesome thread. Thanks. What if I wanted the three line hamburger icon to switch to an 'X' after clicked and menu has appeared? Can you share site url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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