Guest Posted June 20, 2020 Share Posted June 20, 2020 Hey everyone, I just started using Squarespace free trial, and I am just starting with the design of my website. I am pretty happy with how the desktop site looks but not really with the mobile website. What I want to do is keep using the desktop navigation menu on mobile, because on mobile the menu becomes a hamburger, but I just want to keep the text on the website because otherwise it looks kinda empty on mobile. I added images on how I want it to be, you can see that it is just the regular menu instead of the hamburger. Thanks! Link to comment
Beyondspace Posted June 20, 2020 Share Posted June 20, 2020 Hi SeppeDP What is your site url? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget 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
Guest Posted June 20, 2020 Share Posted June 20, 2020 57 minutes ago, bangank36 said: Hi SeppeDP What is your site url? https://oleander-springtail-xar7.squarespace.com/ password 1234 Link to comment
Beyondspace Posted June 20, 2020 Share Posted June 20, 2020 (edited) Please try this, Insert the snippet into Design->Custom Css .header-title-logo img { max-height: 150px !important; } .header .header-title-nav-wrapper .header-nav { display: block !important; } .header .header-burger { display: none !important; } Edited June 20, 2020 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget 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
Guest Posted June 20, 2020 Share Posted June 20, 2020 Yes, thanks a lot! Exactly what I needed. 26 minutes ago, bangank36 said: display: none; !important; Had to remove the ';' after the none though. Not sure if that's correct, but it gave me an error on that line. Link to comment
Beyondspace Posted June 20, 2020 Share Posted June 20, 2020 26 minutes ago, SeppeDP said: Yes, thanks a lot! Exactly what I needed. Had to remove the ';' after the none though. Not sure if that's correct, but it gave me an error on that line. You're right, my bad BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget 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
lidyaaC Posted December 14, 2021 Share Posted December 14, 2021 @bangank36 is there a way to use this code but have it show the social icons as well? My menu is just made from the social links and I would like to keep it the same on both mobile and desktop? https://www.lydia-cottrell.com Link to comment
Beyondspace Posted December 15, 2021 Share Posted December 15, 2021 On 12/15/2021 at 6:46 AM, lidyaaC said: @bangank36 is there a way to use this code but have it show the social icons as well? My menu is just made from the social links and I would like to keep it the same on both mobile and desktop? https://www.lydia-cottrell.com Hi @lidyaaC, Have you solved it yet? It looks fine at the moment BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget 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
lidyaaC Posted December 16, 2021 Share Posted December 16, 2021 @bangank36 yes I worked it out! - Thank you! Beyondspace 1 Link to comment
GMS2 Posted January 18, 2022 Share Posted January 18, 2022 (edited) On 6/20/2020 at 11:34 AM, bangank36 said: Please try this, Insert the snippet into Design->Custom Css .header-title-logo img { max-height: 150px !important; } .header .header-title-nav-wrapper .header-nav { display: block !important; } .header .header-burger { display: none !important; } Hey guys, I found this thread so helpful because I want to do the same! Images attached for reference that I am trying to achieve - gracemargetsonstudio.com Edited January 18, 2022 by GMS2 link didnt work Link to comment
GMS2 Posted January 18, 2022 Share Posted January 18, 2022 36 minutes ago, GMS2 said: Hey guys, I found this thread so helpful because I want to do the same! I love the desktop version of my site but hate the social icons for mobile. I entered in the code and it got rid of the icons, but now need to just add in the same helvetica text words that are on desktop, but for mobile I want them to be bottom left hand side. Images attached for reference - gracemargetsonstudio.com Update: I have now broken the code completely haha, any guidance very helpful Link to comment
GMS2 Posted January 18, 2022 Share Posted January 18, 2022 Mobile version I am trying to acheive: Link to comment
tuanphan Posted January 20, 2022 Share Posted January 20, 2022 On 1/19/2022 at 6:20 AM, GMS2 said: Mobile version I am trying to acheive: Can you add nav items? Currently we don't see any items on header And you want Desktop: left logo - right nav items Mobile: Header: Left logo - Footer: Left nav items Is this right? 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
dw1080 Posted May 29, 2022 Share Posted May 29, 2022 (edited) Hello @tuanphan and @bangank36, similar to the original post I would like to get rid of the hamburger style menu on mobile and keep the desktop menu layout. How would I do this? I am on a business plan. My website is: https://www.david-wright.com/ Password: abc123 Thanks for your help! Edited May 29, 2022 by dw1080 Link to comment
tuanphan Posted June 1, 2022 Share Posted June 1, 2022 On 5/30/2022 at 12:44 AM, dw1080 said: Hello @tuanphan similar to the original post I would like to get rid of the hamburger style menu on mobile and keep the desktop menu layout. How would I do this? I am on a business plan. My website is: https://www.david-wright.com/ Password: abc123 Thanks for your help! Add to Design > Custom CSS /* Desktop nav on mobile */ @media screen and (max-width:750px) { #header #topNav { display: flex; justify-content: center !important; align-items: center; float: none !important; } div#mobileMenuLink { display: none; } } 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
NatPeix Posted August 9 Share Posted August 9 On 6/20/2020 at 3:34 AM, Beyondspace said: Please try this, Insert the snippet into Design->Custom Css .header-title-logo img { max-height: 150px !important; } .header .header-title-nav-wrapper .header-nav { display: block !important; } .header .header-burger { display: none !important; } Hi @tuanphan and @Beyondspace, I am trying to do something similar for a clients site but can't seem to nail the code. I tried the code used here but am running into an issue where my navigation seems to be aligned so far to the right that it is off screen (as shown below). Any help would be much appreciated. Thank you! The site is ridge-landscape.com. Link to comment
tuanphan Posted August 11 Share Posted August 11 On 8/10/2023 at 1:13 AM, NatPeix said: Hi @tuanphan and @Beyondspace, I am trying to do something similar for a clients site but can't seem to nail the code. I tried the code used here but am running into an issue where my navigation seems to be aligned so far to the right that it is off screen (as shown below). Any help would be much appreciated. Thank you! The site is ridge-landscape.com. What is your site url? We can check easier. In this case I think we need to reduce logo container width 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
NatPeix Posted August 11 Share Posted August 11 16 hours ago, tuanphan said: What is your site url? We can check easier. In this case I think we need to reduce logo container width My site URL is ridge-landscape.com Link to comment
NatPeix Posted August 11 Share Posted August 11 1 minute ago, NatPeix said: My site URL is ridge-landscape.com Or clementine-puma-h2jm.squarespace.com Link to comment
tuanphan Posted August 14 Share Posted August 14 On 8/12/2023 at 3:13 AM, NatPeix said: My site URL is ridge-landscape.com Use this new code instead .header-title-logo img { max-height: 150px !important; } .header .header-title-nav-wrapper .header-nav { display: block !important; } .header .header-burger { display: none !important; } .header-nav { width: 60% !important; flex: 1 1 60% !important; } .header .header-title-nav-wrapper .header-title { flex: 1 0 40% !important; } NatPeix 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
NatPeix Posted August 15 Share Posted August 15 11 hours ago, tuanphan said: Use this new code instead .header-title-logo img { max-height: 150px !important; } .header .header-title-nav-wrapper .header-nav { display: block !important; } .header .header-burger { display: none !important; } .header-nav { width: 60% !important; flex: 1 1 60% !important; } .header .header-title-nav-wrapper .header-title { flex: 1 0 40% !important; } Thank you so much! It worked tuanphan 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