Jump to content

Nav colour not correct when rolled over - appears lighter

Recommended Posts

I am currently developing a site and through Custom Css we have applied a colour onto the rollover. We are having problems with the colour showing differently in different areas. For example, in the navigation on the home page the colour renders correctly when you rollover. When you go into a page, Shop, for example, the red is lighter when you rollover. Throughout the site where we have a hyperlink the red is lighter, it's as if it has an opacity to it. The css we are using is:

a:not(.sqs-block-button-element) {
    color: #101820 !important; // standard link color
    &:hover {
        color: #9d2235  !important; // hover color
    &:active {
        color: #c1c638  !important; // color link goes when clicked


The three screen grabs show the darker colour on the nav which is correct and the lighter colour. The thrid shows the lighter rollover when used in a hyperlink.

Can anyone help with this or suggest a better method?


Lighter on rollover.png

Correct colour on rollover.png

Hyperlink - lighter incorrect colour.png

Link to comment
  • Replies 0
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.