How to change the colour of the top navigational links on hover

Squarespace 7.1Tutorials
Written By Primitus Consultancy

In this tutorial, you will be guided on how to modify the color of the top navigational links when hovering over them on Squarespace 7.1. The provided code is specifically designed for Squarespace 7.1 version. There are several reasons why you might want to change the color, such as enhancing the overall visual appeal of your site and providing a better user experience for your viewers. By following the instructions presented in this tutorial, you'll be able to customize the color of the top navigational links on hover to align with your desired site design and create an engaging browsing experience on Squarespace 7.1.

Complexity: Easy

Step 1: To change colour to the top navigational links on hover, simply copy the code below: 

// Navigation Color //
.header-nav-item a:hover {
    color: #BE887A !important;
   background-image: none !important;
}

Step 2: From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box. This code will work site wide.

You can then adjust the colour to your liking.

See other related blogs

Featured
side-bar-logo.png
Plugins-Button.jpg
Templates-Button.jpg
SEO-Button.jpg
11help-Button.jpg
 
Home Blog
Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous

Squarespace banner parallax 7.1
Next

How to block countries from your Squarespace website.