How to create hover effects for the main menu in Squarespace // Squarespace Header Hover Effects

Подписаться 25 тыс.

Просмотров 19 тыс.

50% 1

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 ♥

Опубликовано:

28 ноя 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 42

@InsideTheSquare Год назад

⚠️ 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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-euJqHXs_L1M.html

@gautamkar5102 Год назад

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.

@InsideTheSquare Год назад

Yay! So happy I could help! 🙌🏻

@christinemontes4171 10 месяцев назад

Thanks! This was just the pop I needed to make my header look professional!!

@InsideTheSquare 10 месяцев назад

Awesome - glad I could help!

@matthewdix9753 Год назад

Thank you so much, super helpful as always!

@InsideTheSquare Год назад

Yay! So happy I could help! 🙌🏻

@eurikajankauskaite9052 Год назад

So helpful, thank you so much !!!

@InsideTheSquare Год назад

You’re welcome! Happy to help. 😎

@vaskoobscura_ Год назад

Very useful thank you.

@InsideTheSquare Год назад

You’re welcome! Happy to help. 😎

@marisaxox 4 дня назад

wow, thanks so much for this!

@InsideTheSquare 2 дня назад

You're welcome! :)

@Royh224 Год назад

never done code before, this is fun!

@InsideTheSquare Год назад

You are so welcome! 🤩 Your comment just made my day - thank you so much for letting me know!

@MrWilliamKennedy 5 месяцев назад

Thank you! I will be following for more gems!

@InsideTheSquare 5 месяцев назад

You're welcome! Happy to have you as a new subscriber ☺️

@InsideTheSquare Год назад

⭐ Learn Squarespace CSS basics in my FREE class: insidethesquare.co/learn

@gabbyjoudi6950 9 месяцев назад

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!

@InsideTheSquare 9 месяцев назад

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

@colbypitts8483 10 месяцев назад

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!! :)

@InsideTheSquare 9 месяцев назад

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! 🎉

@tselone Год назад

How do you stack these codes on my other codes that are already on my design css?

@InsideTheSquare Год назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h8qfZdaATbU.html Hope that helps! 💙

@oKathiio 8 месяцев назад

Hey! Is it possibile to change the hover background color for only one specific page in squarespace? Thank you so much!

@InsideTheSquare 8 месяцев назад

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!

@oKathiio 8 месяцев назад

@@InsideTheSquare wow this is great. thank you so much!

@nickmalmstrom6828 Год назад

Is this available for the Montauk template?

@InsideTheSquare Год назад

Unfortunately, this is specific to Squarespace version 7.1 and won’t work for older versions of Squarespace.

@CB_GAMES777 Месяц назад

Why can't I duplicate text blocks in 7.0? Adding new text blocks takes up the whole horizontal space, but I need 2 text blocks to share this space.

@InsideTheSquare Месяц назад

When Squarespace released 7.1 four years ago, they decided to focus on adding new features to the latest version and not making major feature updates to the older version of Squarespace. For support with 7.0 features, you can contact Squarespace directly via support.squarespace.com

@mathiaslibor287 11 месяцев назад

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.

@InsideTheSquare 11 месяцев назад

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}

@mathiaslibor287 11 месяцев назад

@@InsideTheSquare I’ve done it exactly like that. But the effect is still as mentioned above

@InsideTheSquare 11 месяцев назад

@@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.

@jenayahawreluik5695 Год назад

How do I remove the underline from folder items?

@InsideTheSquare Год назад

This tutorial should help you out with that: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-u6gW32koLQI.html

@TimothyHennington Год назад

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?

@InsideTheSquare Год назад

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

@samkachmararchitects Год назад

try starting and ending this entire code with

@JavierNapolesb Год назад

Any idea why mine doesn’t do any change?

@InsideTheSquare Год назад

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