Dario Posted January 1, 2020 Share Posted January 1, 2020 Hello everyone, Can you please advise on how to force the mobile menu on a desktop? I am new to squarespace and trying to keep the hamburger menu on with all screen sizes. I'm using version 7.1 - and all online resources are based on a previous versions were you can edit mobile settings that are not available anymore. It would be great if you can suggest any tips or custom code. website: tarpon-reed-27ss.squarespace.com password: 1234 many thanks, Dario DesmondHarvey and vionifebiyanti 1 1 Link to comment
sarahnoni Posted January 6, 2020 Share Posted January 6, 2020 Someone posted a similar question and solution here: Link to comment
rsmith3074 Posted January 22, 2020 Share Posted January 22, 2020 Did you ever have any luck with this? I'm looking to do the same thing. I also can't see the post from sarahnoni. DesmondHarvey 1 Link to comment
Marfthew Posted February 14, 2020 Share Posted February 14, 2020 Hey there, Going to preface that I am not a coder. I poke around and add custom code until I break the site, then I try to fix it to the way I like it. The following code worked for me on my site: http://mattehue.com : @media screen and (min-width: 1px) { .header-layout-nav-right .header-nav-list { display: none; } .header-burger { display:flex; } .header--menu-open .header-menu { opacity: 1; visibility: visible; } } You're basically telling the browser that at all times—anytime the screen is greater than 1px wide—to hide the web nav, display the hamburger menu, then make the mobile menu visible. failbetter and tuanphan 2 Link to comment
tuanphan Posted February 24, 2020 Share Posted February 24, 2020 On 1/23/2020 at 4:54 AM, rsmith3074 said: Did you ever have any luck with this? I'm looking to do the same thing. I also can't see the post from sarahnoni. On 2/14/2020 at 7:16 AM, Marfthew said: Hey there, Going to preface that I am not a coder. I poke around and add custom code until I break the site, then I try to fix it to the way I like it. The following code worked for me on my site: http://mattehue.com : @media screen and (min-width: 1px) { .header-layout-nav-right .header-nav-list { display: none; } .header-burger { display:flex; } .header--menu-open .header-menu { opacity: 1; visibility: visible; } } You're basically telling the browser that at all times—anytime the screen is greater than 1px wide—to hide the web nav, display the hamburger menu, then make the mobile menu visible. Thank you. I just tweaked your code to work on my site, 7.1 Here is code /* 768 for tablet - desktop - 992 for desktop */ @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; } } tors, grafikisto, hanna38 and 9 others 6 4 2 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
laurasharp Posted June 12, 2020 Share Posted June 12, 2020 Does anyone know how to make the "burger" lines thicker? Link to comment
RyanDejaegher Posted June 12, 2020 Share Posted June 12, 2020 @laurasharp, yes you can adjust the height value to make the lines thicker .burger-inner:before, .burger-inner:after { height: 2px; } laurasharp 1 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
laurasharp Posted June 12, 2020 Share Posted June 12, 2020 @ryandejaegher Thank you!! I so appreciate it! RyanDejaegher 1 Link to comment
thompsonry Posted July 26, 2020 Share Posted July 26, 2020 (edited) For those asking about Hamburger thickness — Adding this code to Custom CSS worked for me on 7.1 *Edit height to whatever you want, default is 1px .burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun { height: 1px; } Edited July 26, 2020 by thompsonry Link to comment
robnudds Posted July 29, 2020 Share Posted July 29, 2020 On 6/12/2020 at 8:42 PM, RyanDejaegher said: @laurasharp, yes you can adjust the height value to make the lines thicker .burger-inner:before, .burger-inner:after { height: 2px; } This header layout is EXACTLY what I want (with a 3px) burger height. I'm having trouble with it, though. Every code I've tried causes the cart to disappear and the logo to be slightly off-center (towards the right). Any tips on how to get it like this example? Thanks. Link to comment
tuanphan Posted July 31, 2020 Share Posted July 31, 2020 On 7/29/2020 at 8:35 PM, robnudds said: This header layout is EXACTLY what I want (with a 3px) burger height. I'm having trouble with it, though. Every code I've tried causes the cart to disappear and the logo to be slightly off-center (towards the right). Any tips on how to get it like this example? Thanks. 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
laurasharp Posted August 4, 2020 Share Posted August 4, 2020 Is it possible to add a third line to the hamburger menu icon? Link to comment
tuanphan Posted August 4, 2020 Share Posted August 4, 2020 5 hours ago, laurasharp said: Is it possible to add a third line to the hamburger menu icon? Add to Home > Design > Custom CSS /* burger 3 lines */ .burger-box .patty { transform: translatey(0) !important; height: 2px; } laurasharp 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
lilly1 Posted September 11, 2020 Share Posted September 11, 2020 Hi there everybody! First of all thank you for posting the above, very helpful! I was wondering whether anybody knew how to change the spacing between the menu items when the mobile menu then pops up. Mine was fine when I started, but now the vertical spacing between the menu items is very big. I appreciate your help in advance! Link to comment
tuanphan Posted September 11, 2020 Share Posted September 11, 2020 50 minutes ago, lilly1 said: Hi there everybody! First of all thank you for posting the above, very helpful! I was wondering whether anybody knew how to change the spacing between the menu items when the mobile menu then pops up. Mine was fine when I started, but now the vertical spacing between the menu items is very big. I appreciate your help in advance! Can you share site url? 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
hanna38 Posted October 19, 2020 Share Posted October 19, 2020 Hi everybody, Thank you @tuanphan and @thompsonry !!! 😊 Worked out well for me. I have the hamburger menu now on the desktop side, as I wanted it. It has three lines which is fine. Two would be even better, but that's not the big concern. My problem is just now, that it is so small. So there are three little fat lines now. Is the a css to make them bigger (larger) as well? Thanks, hanna Link to comment
tuanphan Posted October 20, 2020 Share Posted October 20, 2020 21 hours ago, hanna38 said: Hi everybody, Thank you @tuanphan and @thompsonry !!! 😊 Worked out well for me. I have the hamburger menu now on the desktop side, as I wanted it. It has three lines which is fine. Two would be even better, but that's not the big concern. My problem is just now, that it is so small. So there are three little fat lines now. Is the a css to make them bigger (larger) as well? Thanks, hanna Can you share site url? 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
SeanC Posted October 23, 2020 Share Posted October 23, 2020 Hi guys, I have the opposite issue. When I view on my tablet, it shows the mobile navbar even though I have plenty of space to show the desktop version. How do I force to show desktop navbar style for screens above a certain width? Thanks, Sean Link to comment
tuanphan Posted October 23, 2020 Share Posted October 23, 2020 2 hours ago, SeanC said: Hi guys, I have the opposite issue. When I view on my tablet, it shows the mobile navbar even though I have plenty of space to show the desktop version. How do I force to show desktop navbar style for screens above a certain width? Thanks, Sean Can you share 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 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
SeanC Posted October 23, 2020 Share Posted October 23, 2020 Sure, Tuan. It's seanchen.work Thanks for taking a look! Link to comment
tuanphan Posted October 25, 2020 Share Posted October 25, 2020 On 10/23/2020 at 11:49 PM, SeanC said: Sure, Tuan. It's seanchen.work Thanks for taking a look! Add to Home > Design > Custom CSS @media screen and (max-width:991px) and (min-width:768px) { .header-display-desktop { display: flex !important; } .header-display-mobile { display: none !important; } .header-burger { display: none; } .header-title-nav-wrapper { flex: 1 0 100% !important; } .header-nav { display: flex !important; width: 70% !important; flex: 1 1 70% !important; } .header-title { flex: 1 0 30% !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
Guest Posted February 8, 2021 Share Posted February 8, 2021 Not sure if anyone still checks this, but I tried the following code on my site and it has caused the cart link to disappear, as well as adding extra spacing between the nav links when I open the menu. Also, the burger icon looks a bit odd. Here is my code so far: /* 768 for tablet - desktop - 992 for desktop */ @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; } } And here is the missing cart icon & extra space between nav links. Link to comment
PEARLERwork Posted February 9, 2021 Share Posted February 9, 2021 @tuanphan I've tried this and it works nicely, but now my logo appears off center: https://share.getcloudapp.com/KouZBdYD https://meridian-yoga-template.squarespace.com/?password=pearler 𝓚𝓪𝓽𝓲𝓮 ✦✦ ⓅⒺⒶⓇⓁⒺⓇ.ⓌⓄⓇⓀ ➸ Link to comment
tuanphan Posted February 9, 2021 Share Posted February 9, 2021 7 hours ago, pearler1570048501 said: @tuanphan I've tried this and it works nicely, but now my logo appears off center: https://share.getcloudapp.com/KouZBdYD https://meridian-yoga-template.squarespace.com/?password=pearler Logo looks fine here. Can youexxplain clearly? 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
Guest Posted February 9, 2021 Share Posted February 9, 2021 I've gotten mine to work by changing the header layout to this one below and using the code I had pasted above. Maybe this will help anyone whose logo is off-center. 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