How to create hover effects for the main menu in Squarespace // Squarespace Header Hover Effects
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:
• How to Change the Color of the Header...
- -
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
- -
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: https://insidethesquare.co/squarespac...
How to change your header layout in Squarespace 7.1: https://insidethesquare.co/tiny/heade...
- -
📑 Download my collection of CSS codes for Squarespace at https://insidethesquare.co/css
- -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕
https://buymeacoffee.com/insidethesquare
- -
🙋 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 → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
💸 DISCOUNT → Save 10% on your first year of Squarespace with code INSIDE10 https://insidethesquare.co/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 ♥
Watch video How to create hover effects for the main menu in Squarespace // Squarespace Header Hover Effects online without registration, duration hours minute second in high quality. This video was added by user InsideTheSquare with Becca Harpain 29 November 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 20,261 once and liked it 299 people.