How to create hover effects for the main menu in Squarespace // Squarespace Header Hover Effects
Вставка
- Опубліковано 28 лис 2022
- 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 Colo...
- - -
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: 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: insidethesquare.co/squarespac...
How to change your header layout in Squarespace 7.1: insidethesquare.co/tiny/heade...
- - -
📑 Download my collection of CSS codes for Squarespace at insidethesquare.co/css
- - -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕
buymeacoffee.com/insidethesquare
- - -
🙋 Need some help? Visit insidethesquare.co/code-help to see my current support options.
- - -
🥰 SUPPORT MY CHANNEL → paypal.me/insidethesquare
💻 WEBSITE → insidethesquare.co
📧 NEWSLETTER → insidethesquare.co/email
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
💸 DISCOUNT → Save 10% on your first year of Squarespace with code INSIDE10 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 ♥
![Lp. Последняя Реальность #97 ЧЁРНАЯ МАТЕРИЯ [Анти Скинт] • Майнкрафт](http://i.ytimg.com/vi/k4MjXCzKsYw/mqdefault.jpg)
![Styling the Dropdown Menu in Squarespace! [Updated 2024]](/img/n.gif)
⚠️ IMPORTANT CSS UPDATE ⚠️ 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: ua-cam.com/video/euJqHXs_L1M/v-deo.html
Thank you so much for all of your videos. Before I found your vides, it was a bit frustrating trying to customize the Squarespace site I was creating. But now with the help of your videos it's really become fun as one of the others have commented.
Yay! So happy I could help! 🙌🏻
Thanks! This was just the pop I needed to make my header look professional!!
Awesome - glad I could help!
Thank you so much, super helpful as always!
Yay! So happy I could help! 🙌🏻
⭐ Learn Squarespace CSS basics in my FREE class: insidethesquare.co/learn
So helpful, thank you so much !!!
You’re welcome! Happy to help. 😎
never done code before, this is fun!
You are so welcome! 🤩 Your comment just made my day - thank you so much for letting me know!
Thank you! I will be following for more gems!
You're welcome! Happy to have you as a new subscriber ☺️
Very useful thank you.
You’re welcome! Happy to help. 😎
How do you stack these codes on my other codes that are already on my design css?
Great Question! Adding code to your site-wide CSS file under design > custom CSS will put your code on every page. But there are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage
You can also use a unique block ID to target a specific thing on your site; check out this tutorial for more info: ua-cam.com/video/h8qfZdaATbU/v-deo.html Hope that helps! 💙
Just came across this video and its great! I am having an issue with the hover opacity code. When I enter it, it doesn't make any change to the header nav items. Any ideas why that may be? Thanks so much!
Interesting 🤔 It might be an opacity setting in the main file; try adding !important after the value, and check out some of my troubleshooting tips here: insidethesquare.co/codehelp
I love your videos, this one especially has helped me out a lot but I have one question. Is there any way you can change the color of the social links/ web page links depending on what page your on. Example: when on the home page, hovering over the "resume" page link it turns white, but if im on the contact page hovering over the "resume" page link it now turns pink. Is this possible? Thank you for all the help you have given to people creating their website!! :)
Great question - and yes - totally possible! For that we’ll combine the active selector with the hover pseudo. It’s a little more advanced but a great topic for a tutorial video. I’ll add it to my tutorial-to-do-list so stay tuned! 🎉
Is this available for the Montauk template?
Unfortunately, this is specific to Squarespace version 7.1 and won’t work for older versions of Squarespace.
I've used the code to make the font of the menu appear "heavier" when hovering over it. Usually it is set to 300 and the hover effect makes it 500. I like the effect but it also affects the surrounding menus. When I hover over one menu all the others to the left of it get moved slightly to the left which makes the experience a little akward. I guess it may have to do with the space the container holds but I don't know how to fix it. Would be happy to get some tips.
Sounds like your hover state is being applied to the menu and not the link. Make sure your font change is for the a and not the selector, like this:
.header-nav a:hover {font-weight: 500}
@@InsideTheSquare I’ve done it exactly like that. But the effect is still as mentioned above
@@mathiaslibor287 The hover state being applied to the link and not the item is how it works on my own website and in the video example here, so I have no idea why your website is not working the same way. Share a link to your site I'll take a look at your source code to see what is causing the issue.
How do I remove the underline from folder items?
This tutorial should help you out with that: ua-cam.com/video/u6gW32koLQI/v-deo.html
Hey! Is it possibile to change the hover background color for only one specific page in squarespace? Thank you so much!
Great question - and yes! All you need to do is add the code to that page using page header code inejeciton or a code block. That way it only loads when that page loads. Here is a tutorial with more info: htps://insidethesquare.co/singlepage
Hope that info helps and best of luck with your Squarespace project!
@@InsideTheSquare wow this is great. thank you so much!
Any idea why mine doesn’t do any change?
If this feature isn’t working the way mine is in the video, you definitely need to contact the official Squarespace support team. You can find more info on how to reach them at support.squarespace.com
Hey when I add the following code
.header-nav-item--active a {
background-image: none!important;
font-weight: bold;
color: #D4967D!important;
}
.header-nav a:hover{
background-image: none!important;
font-weight: bold;
color: #D4967D!important;
}
If I am on another page and hover over the folder and links it works great, if I am on a page IN the folder, all the pages show as active/hovered over. When I try to copy the code above for links IN the folder, I get a syntax error.
Any ideas?
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
try starting and ending this entire code with