Jump to content

Nav links :hover is on active page for some reason

Recommended Posts

For some reason, a hover effect is showing up on active pages on nav links. For instance, navigate to About page. If you mouseover the About page link, the opacity changes. I have not applied any custom CSS. This came with the starting template.

I can't find anything in the Design settings, or otherwise.

Chrome inspector shows:

body:not(.tweak-transparent-header) .header-nav-item--active a:hover {
  1. opacity: .7;
}
body:not(.tweak-transparent-header) .header-nav-item--active a:hover {
    opacity: .7;
}

 

Edited by Seedfolk
Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Its there by default as is the underline of the active link, There is no setting to change it that I can find. 

body:not(.tweak-transparent-header) .header-nav-item--active a:hover {
    opacity: .7;
}

You can add the code and tweak the opacity number to .10  or whatever makes it not fade at all. 

Edited by derricksrandomviews
Link to comment
11 minutes ago, derricksrandomviews said:

Its there by default as is the underline of the active link, There is no setting to change it that I can find. 


body:not(.tweak-transparent-header) .header-nav-item--active a:hover {
    opacity: .7;
}

You can add the code and tweak the opacity number to .10  or whatever makes it not fade at all. 

Yes, that's possible. However, this creates unnecessary, untidy code.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.