Тёмный

Squarespace 7.1 Mobile Menu Settings Overview - Layout, Colors, Icons & More! 

InsideTheSquare - Squarespace Tutorials
Подписаться 25 тыс.
Просмотров 10 тыс.
50% 1

You have a ton of options for customizing the look of your mobile menu built right into Squarespace. This video will show you how to access these settings and how to customize your menu so it suits your site style.
---
📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign
---
In this tutorial, you’ll learn how to change the layout, colors, alignment, and icons in the mobile menu of your Squarespace website. You'll also learn about some custom code you can use to change the color of the social media icons and the size of the button.
Change the font size 16px in the code below to update the button on your mobile menu:
.header--menu-open .header-menu-cta a { font-size: 16px!important}
Change the font family of the links in your mobile menu:
.header--menu-open a {font-family: serif!important}
Change the word "red" in the code below to what color you want those icons to be!
.header-menu-actions .icon svg {fill: red}
To learn more about the types of colors you can use in code, check out this article: insidethesquare.co/colors
---
Related Videos
Custom mobile menu icon image: • How to use an image fo...
Mobile menu background image: • How to use an image fo...
---
🥳 Ready to build a site with Squarespace ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquare.co/partner10 ❤️
---
🙋 Need some help? Visit ​insidethesquare.co/code-help​ to see my current support options.
---
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 insidethesquare.co/css
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

Опубликовано:

 

7 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 21   
@InsideTheSquare
@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-euJqHXs_L1M.html
@carlosazevedo7748
@carlosazevedo7748 2 года назад
Thanks for this. Was wondering if you have any tutorial explaining how to configure the drop down menu icon when mobile view, like change the icon iteself, move it around to tweak the position, etc. Thanks.
@InsideTheSquare
@InsideTheSquare 2 года назад
Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉
@stevenmaile6547
@stevenmaile6547 Год назад
Great video! I'm wondering how I can change the font size of the navigation links in the overlay menu. The website I am working on has HUGE font size for the navigation links when the header menu is open. How do I do this?
@InsideTheSquare
@InsideTheSquare Год назад
Hey Steven, I recommend checking out the official Squarespace support forums for that: support.squarespace.com/hc/en-us/articles/205816038-Styling-navigation
@linesolmer4833
@linesolmer4833 Год назад
Thanks for the video. How would you change the width of the open menu when youre in mobile version of edit?
@InsideTheSquare
@InsideTheSquare Год назад
I am not quite sure what you are trying to create but I would love to help! Feel free to submit a tutorial request with more info at insidethesquare.co/suggest-tutorial
@BurchStudio
@BurchStudio 8 месяцев назад
Thanks for this. Was wondering if you have any tutorial explaining how to configure the drop down menu when in mobile view, so that links in dropdown folders are on main menu page. Right now on my main menu page it says "Menu" (which is my folder) and one has to select "Menu" to get to the rest of my navigation pages in the "Menu" folder. I want these to all on the main menu page. Thanks.
@InsideTheSquare
@InsideTheSquare 8 месяцев назад
This is a great question! You'll likely need some javascript to change the layout and nested functionality. I don't have a code for you, but someone in the Squarespace forum might! I'd recommend posting there; best of luck!
@jordanh.3847
@jordanh.3847 Год назад
Is there a way to show the actual page titles along the top line in mobile, or is the only available option to have the icon with the drop down menu?
@InsideTheSquare
@InsideTheSquare Год назад
Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. If I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!
@brianaguirre3717
@brianaguirre3717 2 года назад
Hello! I've been following your videos for a while and wanted to ask you for help with the newsletter. On your website I could see that you only need the name and email to subscribe, how did you do it? When I add the newsletter section, it generates the name, surname and email box, how do I do it to remove the last name box? 🙏🙏🙏
@InsideTheSquare
@InsideTheSquare 2 года назад
Hey Brian! I actually use Flodesk for my newsletter. You can also use a Squarespace form block (not newsletter block) and instead of name, use a text field and label it name. Hope that info helps!
@user-yv5fr1li9e
@user-yv5fr1li9e 8 месяцев назад
My menu doesn't have the scroll bar option is there something I can do to add that so that mine doesn't just clip off and not show all the pages?
@InsideTheSquare
@InsideTheSquare 8 месяцев назад
Great question! You do have a few options. Think about writing a paragraph on a post-it note; you can make it fit by reducing the size of your letters, writing in a more narrow font, or reducing the actual word count. That's what you'll need to do for your links. If you dont want to change the names, you can pick a different font, or you can reduce the font size with CSS. I am surprised I dont' have this tutorial already 😅 I'll add it to my to do list, but in the meantime, here is a code you can use. Adjust the number 12 to the size font you want to show. .header--menu-open a {font-size: 12px!important} Hope that helps and best of luck with your project!
@user-yv5fr1li9e
@user-yv5fr1li9e 8 месяцев назад
@@InsideTheSquare Thank you for the font size code.. do you know if there is an easy code to make my box able to scroll for when we add more pages to our membership area as making the font smaller and smaller probably wont be ideal lol :) Your tutorials have been super helpful.. Thank you!
@charleen9325
@charleen9325 Год назад
Can we change the button to show at the top rather the bottom?
@InsideTheSquare
@InsideTheSquare Год назад
Ask and you shall receive! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-OHyq3j1W4mo.html
@MichaelMensch-xq1cb
@MichaelMensch-xq1cb Год назад
why do my links in header show up as only lines, no text when published in mobile view?
@InsideTheSquare
@InsideTheSquare Год назад
Hey Michael! It's hard to say without looking at your site, but double check the colors in for your mobile menu. They could be the same color as the mobile meu background. If that's not the issue, send a link to my inbox and I'll take a look: hello-at-insidethesquare.co
@MichaelMensch-xq1cb
@MichaelMensch-xq1cb Год назад
@@InsideTheSquare Thx. I sent an inquiry from your page
Далее
5 Squarespace Mobile Menu Design Hacks
11:41
Просмотров 7 тыс.
The lightweights ended Round One with a BANG 💪
00:10
Why is THIS the Perfect Homepage?
14:21
Просмотров 540 тыс.
Squarespace How to Add Icons to Your Website
14:03
Просмотров 6 тыс.