In this Squarespace tutorial, you’ll learn how to create unique hover effects for the links in main menu of your website. There are four types of links you can have in your main navigation, and the codes for each one of them are listed below.
Want to change the button in your main menu? Check out this tutorial; it's a little old but the codes will still work for the latest version of Squarespace:
[ Ссылка ]
- - -
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: [ Ссылка ]
- - -
Before you dig in, there are a few things you need to know:
→ This is specific to Squarespace version 7.1 and won’t work for older versions of Squarespace.
→ There is more than one way to do this! Code is super customizable, and this is my technique.
→ These are just a few ideas! You can apply a lot of different property and value combinations to these selectors.
Here are the codes from this tutorial.
Main Links:
.header-nav a:hover
Active Page Link:
.header-nav-item--active a:hover
Folder Title:
.header-nav-folder-title:hover
Link Inside Folder Dropdown:
.header-nav-folder-item a:hover
Change the font color:
color: red!important
Make the text bold:
font-weight: bold
Change the background:
background: yellow
Related Videos:
How to customize your dropdown menu: [ Ссылка ]
How to change your header layout in Squarespace 7.1: [ Ссылка ]
- - -
📑 Download my collection of CSS codes for Squarespace at [ Ссылка ]
- - -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕
[ Ссылка ]
- - -
🙋 Need some help? Visit [ Ссылка ] to see my current support options.
- - -
🥰 SUPPORT MY CHANNEL → [ Ссылка ]
💻 WEBSITE → [ Ссылка ]
📧 NEWSLETTER → [ Ссылка ]
🤳 INSTAGRAM → [ Ссылка ]
👍 FACEBOOK → [ Ссылка ]
📌 PINTEREST → [ Ссылка ]
💸 DISCOUNT → Save 10% on your first year of Squarespace with code INSIDE10 [ Ссылка ]
- - -
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 ♥
