mportch Posted April 2, 2020 Share Posted April 2, 2020 Hi, Anyone know how to turn the nav on the desktop version into a hamburger? I want mine in the top right corner. Link to comment
tuanphan Posted April 2, 2020 Share Posted April 2, 2020 Add to Home > Design > Custom CSS @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } 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
mportch Posted April 2, 2020 Author Share Posted April 2, 2020 Thanks so much. Worked great - just needed one more curly bracket right at the end. I know nothing about code. Cheers! Link to comment
tuanphan Posted April 2, 2020 Share Posted April 2, 2020 1 hour ago, mportch said: Thanks so much. Worked great - just needed one more curly bracket right at the end. I know nothing about code. Cheers! so did you solve? ✌️ 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
deaton72 Posted June 10, 2020 Share Posted June 10, 2020 Hamburger menu styling: I have hamburger menu on the desktop, using 40% of the right side, so that our main image is still mostly visible, but when I click a submenu - such as Firm, the main menu moves to the right and is still visible as an almost ghost image. Is there a way to fix this? site: https://corn-apricot-zn88.squarespace.com/ PW BA47 Link to comment
tuanphan Posted August 18, 2020 Share Posted August 18, 2020 On 6/10/2020 at 11:20 PM, deaton72 said: Hamburger menu styling: I have hamburger menu on the desktop, using 40% of the right side, so that our main image is still mostly visible, but when I click a submenu - such as Firm, the main menu moves to the right and is still visible as an almost ghost image. Is there a way to fix this? site: https://corn-apricot-zn88.squarespace.com/ PW BA47 Have you solved it yet? If yes, can you provide the solution? If not, can you take a screenshot? 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
jenniferboddam Posted August 11, 2021 Share Posted August 11, 2021 @tuanphan is there a way to turn your navigation into a burger menu on scroll? so say scrolling past the first section and it will then fold up into the 3 line menu? Link to comment
tuanphan Posted August 14, 2021 Share Posted August 14, 2021 On 8/12/2021 at 3:41 AM, jenniferboddam said: @tuanphan is there a way to turn your navigation into a burger menu on scroll? so say scrolling past the first section and it will then fold up into the 3 line menu? Try this code @media screen and (min-width:768px) { header#header.shrink { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } }} 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
Phil84vaive Posted October 19, 2021 Share Posted October 19, 2021 Hi there! Does anyone know how to do this with the Jaunt template? I do not have a site set up yet, this is for a client I'm working with who would like this done on their revamped site, and I just can't find an appropriate solution. If we could also include code to have the menu pop up on the left instead of the top, that would be amazing! Link to comment
tuanphan Posted October 21, 2021 Share Posted October 21, 2021 On 10/19/2021 at 10:29 PM, Phil84vaive said: Hi there! Does anyone know how to do this with the Jaunt template? I do not have a site set up yet, this is for a client I'm working with who would like this done on their revamped site, and I just can't find an appropriate solution. If we could also include code to have the menu pop up on the left instead of the top, that would be amazing! You mean this template? https://jaunt-demo.squarespace.com/ Add to Design > Custom CSS header.Header.Header--top { display: none !important; } .Mobile.loaded { display: block !important; } 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
MoonMama Posted December 2, 2021 Share Posted December 2, 2021 (edited) On 4/2/2020 at 5:08 AM, tuanphan said: @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } Hi, This code worked for me however I want to center my logo and make it large without pushing the other content down. I would like to achieve this a wider x and rows for the nav items from this site https://martini71.squaremuse.com/# Closed Open My site here on SQSP is https://www.tribeandsol.com but I am currently using a trial to design a new site which is https://ellipse-prism-hf54.squarespace.com pw moonmama Edited December 2, 2021 by MoonMama Link to comment
tuanphan Posted December 4, 2021 Share Posted December 4, 2021 On 12/2/2021 at 10:44 AM, MoonMama said: Hi, This code worked for me however I want to center my logo and make it large without pushing the other content down. I would like to achieve this a wider x and rows for the nav items from this site https://martini71.squaremuse.com/# Closed Open My site here on SQSP is https://www.tribeandsol.com but I am currently using a trial to design a new site which is https://ellipse-prism-hf54.squarespace.com pw moonmama It looks like you solved? I see logo center here 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
MoonMama Posted December 4, 2021 Share Posted December 4, 2021 10 hours ago, tuanphan said: It looks like you solved? I see logo center here No this isn't solved. I had two request above, please let me know if you're able to help with this? Link to comment
merman118 Posted January 22, 2022 Share Posted January 22, 2022 Hi... how do I move the navigation 'hamburger' to the left side of the header? Link to comment
tuanphan Posted January 25, 2022 Share Posted January 25, 2022 On 1/22/2022 at 9:56 PM, merman118 said: Hi... how do I move the navigation 'hamburger' to the left side of the header? I see it is in left side now 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
MoonMama Posted February 1, 2022 Share Posted February 1, 2022 Hi the question above your post is not my question it is someone else (check the name). My post is at the top and one of my questions didn't get answered. @tuanphan Link to comment
Keenan Posted February 2, 2022 Share Posted February 2, 2022 On 4/2/2020 at 11:08 PM, tuanphan said: Add to Home > Design > Custom CSS @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } This worked great for me! Just two questions to follow up — 1. How can I hide the LOGIN next that shows on desktop, next to the Hamburger? 2. How can we add a red hover state to the navigation links in the mobile overlay? Website: https://raspberry-seabass-y6wf.squarespace.com Password: movebeyondwithava Thanks! Frances Link to comment
tuanphan Posted February 7, 2022 Share Posted February 7, 2022 #1. It looks like you solved with this CSS .header-display-desktop .user-accounts-link { display: none; } #2. Add to Custom CSS div.container.header-menu-nav-item a:hover { color: red !important; } 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