Скачать или смотреть How to add a second button to your Squarespace navigation: two header buttons in Squarespace

In this tutorial, we're diving into the world of custom CSS to add a second button to your main menu. Don't worry if you're new to coding – I'll guide you through each step, from pasting the initial code to fine-tuning colors and hover effects.

We'll cover both desktop and mobile menus, ensuring your site looks great on all devices. The custom codes are provided below, but be sure to watch the video for a detailed walkthrough on customizing them for your unique Squarespace site.


🔗 Related content Links:
Original Blog Post: https://tutorials.squarespace.com/cod...
Basic CSS for Squarespace - save 10% with promo code YOUTUBE: https://insidethesquare.co/learn
Member Login Button Tutorial: https://insidethesquare.co/squarespac...
Squarespace CSS Code Collection: https://insidethesquare.co/css
Subscribe to my channel for new Squarespace videos every week:    / @insidethesquare  

⏱️ Important Timestamps:
0:00 - Introduction and overview
0:42 - Accessing Custom CSS in Squarespace
1:03 - Adding and customizing the button style
1:49 - Handling account login links
2:29 - Adjusting button position in navigation
2:48 - Adding padding and alignment
3:12 - Creating a hover effect
4:00 - Recap and accessing the codes
4:34 - Bonus: Squarespace CSS Cheat Sheet info

🖥 Tutorial Code
.header-nav-item:last-of-type:not(.user-accounts-text-link),
.header-menu-nav-item:last-of-type:not(.customerAccountLoginMobile) a{
background:red;
padding: 5px;
margin-top: -5px
}
.header-nav-item:last-of-type:not(.user-accounts-text-link):hover{
background: pink
}

- -
Need help with customizing your site? Here are my current support options: https://www.insidethesquare.co/code-help
- -
The term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace Inc. The accuracy of this information is subject to change. #SquarespaceCustomization #WebDesignTips #CSSforBeginners #squarespacetutorial #SquarespaceCSS