How to Change Your Mobile Menu Font Size in Squarespace 7.1

Подписаться 25 тыс.

50% 1

You can do a lot of creative things with the font menu in Squarespace, but changing your mobile menu font size isn’t one of them. 😅
In this tutorial, you’ll learn how to use custom CSS to not only change the size of the links in your mobile menu, button included, but how to make sure there is enough space between those links so that you still meet accessibility standards.
You’ll also learn how to change the vertical alignment, and make some changes to folders too.
The codes from this tutorial are below, but make sure you watch the video so you know how to use them and how to make them uniquely yours.
Here are the codes used in this tutorial. Be sure to edit the px values so it works for the style of your own website!
/*change font size & clickable area */
.header-menu-nav-folder a{
font-size:25px;
padding-bottom:15px
}
/* change button font size */
.header-menu-cta a{
font-size:16px!important
}
/* Option 1: move links up & leave button at the bottom */
.header-menu-nav-folder-content{
justify-content:flex-start
}
/* Option 2: move links and button up */
.header-menu-nav-folder{
min-height:0!important
}
/* reduce space for folder links */
.header-menu-nav-folder--active
.header-menu-nav-item a{
margin-top:5px
}
- - -
Related Content:
📝 Original blog post → insidethesquare.co/squarespac...
📖 Beginners Guide to Squarespace CSS → insidethesquare.co/learn
💌 Get emails about new tutorials, events, and ideas for Squarespacers → insidethesquare.co/email
5️⃣ Five creative ways to modify your mobile menu → insidethesquare.co/squarespac...
🔡 Free guide to Font & text properties → insidethesquare.co/textguide
📖 Learn how to use Squarespace 7.1 → insidethesquare.co/start
🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help
- - -
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 ♥ #SquarespaceTutorial #SquarespaceTraining #mobilemenu #squarespacemobile #SquarespaceTips #WebsiteDesign #BeginnerFriendly #FreeTraining #LearnSquarespace #WebDesignTutorial #SquarespaceHelp
#NewToSquarespace #SquarespaceSupport

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

6 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 12

@JulieSilfverbergWebDesign 29 дней назад

Thank you so much. My button was hidden under my hours, and now, thanks to you, it is beautifully visible.👍🏻 Such great tutorials.

@InsideTheSquare 29 дней назад

Awesome - I'm so happy this code trick is what you needed! :)

@RikAhlberg 29 дней назад

Thanks for another great tip! I finally was able to fix my folder alignment (they were all vertically aligned rather than to the top, which was driving me crazy).

@InsideTheSquare 26 дней назад

Awesome - happy to help!

@esadetails 29 дней назад

THANK YOU!!! Love this channel. Thank you so much for making sqaurespace easy.

@InsideTheSquare 26 дней назад

You are so welcome - I'm happy to help 🥰

@MMBookworm57 26 дней назад

Fantastic it was so easy, thank you.

@InsideTheSquare 23 дня назад

You are so welcome - happy to help! :)

@winstarbookkeeping 29 дней назад

Hi Becca! This is great! I do struggle with the look of my website, especially on mobile. When I make adjustments to my website which looks aesthetically great, but when I jump to the mobile mode to see how it looks, it doesn’t looks aesthetically pleasing. Will you be doing more on the mobile css tutorials? Or is there a way to keep the separate? Or should I build my SS site based on mobile first, make that look great and then tweak my website look? Is there a better way to do this with CSS? Do you have any tutorials on this? This has been the bane of my existence in 7.1!!!! 🤣😂🤣 Didn’t have these issues with 7.0. Thank you for any feedback! 🙏🏾

@InsideTheSquare 13 дней назад

This is a great question! i would love to do more mobile based tutorials and definitely have plans for a workshop or two ;) Building mobile first is pretty common these days, and totally an option in Squarespace. I'm kinda old school and I like to sketch my wireframes on paper. What I'll do is take an 8.5 x 11 standard piece of paper, hold it horizontally, and fold 1/3 of the page down on the side. I sketch out the desktop version on the 2/3 of the page, and then I make sure to place all the same content blocks on the 1/3 of the page mobile side. Seeing it side by side helps me mentally keep track of the same content on both screens. For layouts that are super different, I'll do a section swap. Here is a tutorial with more info about that, and stay tuned for more mobile (and tablet) specific tutorials! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AQnwhitEqnI.html

@veilino3151 22 дня назад

THANK YOU!! I do have a quick question. Is possible to create a clickable text link that brings up an image on the same section? I've only seen it pop up on a different tab using a pdf 😅

@InsideTheSquare 13 дней назад

Interesting question! 🤔 Links can be opened in the same tab or a new tab, so I guess you have two options. Upload the image as a file using the link editor and force the browser to open the image in the same tab as the site, so people will have to use a back button to get back to your site, or close the tab completely. If you want an overlay/lightbox feature but you want to use text to activate it instead of an image or thumbnail, you could probably manipulate an image caption/description, depending on the content type you use, or use the lightbox anything plugin from Omari at Sqsp themes. Here is my affiliate link to that plugin if you wanna give it a try: transactions.sendowl.com/stores/9483/187099