Add a second button to your Squarespace menu // Two Button Header in Squarespace 7.1

In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out https://insidethesquare.co/fluid
---

Having a call to action button in your website header is a really common design style, and Squarespace makes it easy to add it. But what about TWO buttons?! For that you need a little extra CSS, and this tutorial will teach you how to use it.
---
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
---
In this tutorial we’ll use custom code to turn the last link in your main navigation into a button so you can have two buttons in the header of your Squarespace website.

- - -
⚠ IMPORTANT CSS UPDATE ⚠
The code for this tutorial has changed! use this selector to isolate the last link in your menu:
.header-nav-item:last-of-type

How we added code has also changed! 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: https://youtu.be/euJqHXs_L1M

Here are the codes from this tutorial; be sure to get creative with the border styles and colors, and adjust the margin and padding to look perfect on your own site (it all depends on your font)

.header-nav-item:last-of-type {background:#000; padding: .3rem 1rem; color:#FFF!important;}

This part of the code hides that super annoying underline from active links:
.header-nav-item--active a{background-image:none!important}

This code will invert the colors and give it a border on a hover:
.header-nav-item:last-of-type:hover {background:#FFF; padding: .2rem 1.8rem; color:#000!important; border: .1rem solid #000}

This code will give it a different background color on a hover:
.header-nav-item:last-of-type:hover {background:green; color:yellow!important;}


- - -
🔗 RELATED VIDEOS 🔗
Creating Custom Borders with Code in Squarespace: https://youtu.be/ki9KsAhFmJM
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
- - -
🤩 Get access to my custom code collection, available now at 👉 https://insidethesquare.co/css
---
🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.
---
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
---
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 ♥

Тэги:

#button_in_squarespce_menu #squarespace_menu_button #how_to_use_css_in_squarespace #mega_menu_squarespace_7.1 #mega_menu_in_squarespace #squarespace_navigation_bar #squarespace_web_design #squarespace_tips_and_tricks #vertical_navigation_in_squarespace #squarespace_custom_styling_tutorial #squarespace_custom_css #squarespace_menu #squarespace_css_tutorial #squarespace_tutorial #squarespace_navigation #custom_css_squarespace #squarespace_7.1 #squarespace_vertical_navigation

Скачать видео