Menu (Navigation) Hover Effects

On Squarespace version 7.1, the active navigation link is underlined but, unlike Squarespace version 7.0 templates, there is no hover effect for items that are in a folder. A hover effect can add an extra design element to make your site unique.

We have added this custom code to our site, you will see this in action on the “Squarespace Websites” and “Logos” menu items under the “Services” folder.

To add the custom code, follow this path with within your Squarespace website administration panel: Website Tools > Custom CSS (or use the search feature to find “Custom CSS”.

Adjust the “background” and “color” values to your specific colors.

Copy the code provided and save, the code is instantly applied to your site.

Designer Top Tip: add a descriptor before each code block to clearly identify what that code block is for as it may not always be clear from the field names what the code was designed for. This helps with troubleshooting and any edits that may be needed to the code in future.

---

// NAVIGATION MENU HOVER EFFECT//

.header-nav-folder-item a:hover {background: #48637F;

color: #FFFFFF !important;

text-align: center;}