5 Squarespace Mobile Menu Design Hacks

[@InsideTheSquare]

⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: kzbin.info/www/bejne/m6atonuOqMR_Z68

[@shannonkozak7728]

As always, you are an amazing resource. I have a client who is using a CTA button in her menu, she is also using the email / call display option on mobile. The two were competing with each other in terms of spacing and I knew I would need CSS to fix it. So I googled - CSS options on Mobile Menu and knew you would come up at the top of my search. Of course you did - with the EXACT solution to what I needed. I looked at the show notes - saw that at 6:06 I can adjust the menu size. Had a quick peek 👀 at that section of your video and within 45 seconds had the solution implemented on my client's website. Now I look like a hero to her (and you most definitely are a hero to me!) Thanks again Becca!

[@InsideTheSquare]

This makes me so happy!!! Helping you find a quick solution to your creative CSS ideas is exactly why I do what I do ☺️ Thanks for letting me know!!

[@rhondamason]

Thank you, Becky! You are the best! I've been searching for half a day on how to vertically align the mobile menu! Thanks for making it so easy and clear.

[@InsideTheSquare]

Awesome - so happy I could help! 🙌

[@ryanoxner]

You've done it again, Becca! Amazing tutorial. It is so greatly appreciated that you put the code in the description every time too. Thanks for helping us all out.

[@InsideTheSquare]

Your comment just made my day - thank you so much for letting me know! 💙

[@hoppervizion]

Thank you! I love your efforts with Squarespace!

[@InsideTheSquare]

Thanks so much! Your comment just made my day!

[@BurchStudio]

Thanks!

[@InsideTheSquare]

Thank you for your support!! 🥰

[@BurchStudio]

Becca, you are an amazing resource! Do you have a tutorial you can share to stylize squarespace 7.1 MOBILE MENU OVERLAY with code so that links in dropdown folders are all on main menu page?

[@InsideTheSquare]

This is such a great idea! It's not currently possible in Squarespace but I bet with a little javascript we can make some magic happen. I'll add this to my idea list and see if I can create a code for us... stay tuned ;)

[@into_the_wasteland]

Thank you again for making these videos so comprehensive. I have a question that I cannot find an answer for: on mobile when I click on my burger lines, I want the page links to display only and not the "menu" folder...but on desktop, I like having the menu folder dropdown. Is this possible to have the folder for desktop but not for mobile? Thank you!

[@InsideTheSquare]

That's a great question! For advanced functionality changes like that, you'll need some Javascript. I don't have a code for that, but someone in the forum might! i would recommend posting there: forum.squarespace.com

[@몽실이-g1v]

I appreciated your instruction. Just one thing I want to know is how to make a line under each mobile menu or box. Thanks in advance!

[@InsideTheSquare]

Great question! You can add a border to any side of a selector. Here is an article with more info: insidethesquare.co/border

[@mcnealandco]

Is there a way to move the bottom button up to make it closer to the navigation menu? Or does it have to be "spaced evenly?"

[@InsideTheSquare]

Great question! I'll have to do a tutorial about this, but for now, here is a code that will scoot the button up under the menu, and push both to the top so they are directly under your site title and the X close button. .header-menu-nav-folder-content { flex-grow: 0; } .header-menu-nav-folder { justify-content: top; }

[@nahlah_mata]

Is there a way to prevent the divider line under the logo from disappearing at the top of the mobile menu when it's open?

[@InsideTheSquare]

Great question! We can't force it to stay visible but you can add a top border to your mobile menu when its open with a code like this: .header--menu-open .header-menu-nav-list{ border-top:1px solid red }

[@aaronpalaian9116]

Need your help PLEASE. So when I'm on mobile and I click the hamburger (3 lines) the overlay opens which is my menu, that part is good as is. When I click one of those links it takes me into a dropdown or another identical screen with the contents of that dropdown. Those links are spaced out really far. How do I adjust the line spacing on the dropdown (folder) overlay on mobile. I'm on 7.1 and clicking edit and header in mobile does not give me a line spacing choice like it does with you. It's just not there. HELP PLEASE! love your videos

[@InsideTheSquare]

This is such a great question! A full tutorial on mobile menu customization is on my tutorial to do list. For now, you can use this code to change the spacing. It removes the margin that is there, and then adds a little margin on the bottom of the links. Adjust those values to suit your site style: .header--menu-open .header-menu-nav-folder-content .container a{ margin:0!important; margin-bottom:.5rem!important }

[@JoGoforth]

Hey there! Thank you so much for this! I'm trying to find if there's any supplemental information to also edit a mobile menu folder. When I click through a folder the field that appears isn't matching the styles of the main menu. Any help is appreciated!

[@InsideTheSquare]

Good question! We can target that open menu folder with CSS. I don't have a tutorial on that right now, but I will add it to my to do list so stay tuned :)

[@JuditBarasteguiAlegre]

I love your short videos to cover impressive improvements to apply at your Squarespace site. However, I've seen that you include "!important" rules, which are generally not considered good practice because they increase specificity and make debugging difficult. Can we eliminate the "!important" and still get the same result?

[@InsideTheSquare]

We're overwriting the Squarespace source code based on the design menu settings by adding to it, and the only way to make sure our code is prioritized over site settings is by adding !important to it. Luckily we're not hand-coding every style in a site, so the process of debugging isn't nearly as intense for a program like Squarespace.

[@JuditBarasteguiAlegre]

@@InsideTheSquare Thanks for the tip!

[@HeistActivated]

I love all your tips! I have been using them to create my website. I still can't figure out why mobile version dropdown menu glitches to a complete white screen. My About Me, Booking and Subscribe is now working

[@InsideTheSquare]

Thanks so much! I'm glad my work is helping yours! I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help

[@maiphyuaung]

Hi! Do you have Tutorials for editing layout of Mobile Menu (Overlay Menu) in Squarespace? I would like to display hierarchical menu on the same page as Overlay menu.

[@InsideTheSquare]

I actually have a bunch of Mobile specific tutorials you can find here: insidethesquare.co/mobile AND! I have an upcoming Mobile + Tablet View workshop! You can find out more here: insidethesquare.co/mobiledesign

[@nahtykajolly1706]

Hi there! Wanted to see if you could give insight into removing the mobile logo? It looks like my code is no longer working for this, and I can't find anything helpful anywhere

[@InsideTheSquare]

Check out this tutorial that will teach you how to create an alternate layout for mobile: kzbin.info/www/bejne/d4LRqJufqaqkpKs

[@BowsCreative]

How change my header logo when my overlay menu pops up? I like the color that its set at but the logo blends into it.

[@InsideTheSquare]

Great question! I don't have a tutorial for that right now, but I'll definitely add it to my to do list so stay tuned :)

[@chaddavis5184]

I'm using the "Move the menu to the bottom" option and when you change the size of the menu from this, it puts your logo and burger back at the top. Also makes the menu text disappear. LOVE THE TUTORIALS THOUGH

[@InsideTheSquare]

Hmmm, are you trying to move your mobile menu to the bottom of the page? You can check out this recent tutorial I created: kzbin.info/www/bejne/hXncomagZrxno9E

[@WiggleWagglesDogcare]

is there a way to change the font style?

[@InsideTheSquare]

I'd recommend using the font menu in Squarespace (click on the pant brush on the top right hand side, select fonts, then scroll down and select Assign Styles to pick one for your main navigation) unless you need it to be a different font than the main menu of your site.

[@SaraMahdavi-e2r]

Hi! I have removed my header from a specific sales page, but am wanting to keep the menu icon on that page on my mobile view. Is this possible? The code that I have used to remove my header is: .header, #-sections{ display:none !important; } Thank You!!

[@InsideTheSquare]

Great qustion Sara! Totally possible; use this code to hide the desktop menu and site title, and keep the mobile menu icon visible: .header-title-nav-wrapper{display:none}

[@SaraMahdavi-e2r]

@@InsideTheSquare That didnt seem to work, am I supposed to replace the code I have with that one? I don't know anything about coding other than copying & pasting the codes I have learned from you into my custom CSS. If you could please provide the exact code I should copy and where I should apply it! Thank you so much!!!