The custom active navigation page link is not staying active on the active page. It disappears unless you scroll over it.

Hi all! 

This might be a wild question and something that has stumped me for days. Here is the WIP site: https://goldwingtv.squarespace.com/

As I am building out my website on Squarespace 7.1 I went with some custom png images as nav links on the top of my header. Using this forum tutorial - 

We were able to get the nav links exactly where we want them using the custom PNGs we wanted. We were also able to add a highlighted PNG for the hover over the nav link too.

BUT one issue is occurring where the custom active navigation page link is not staying active on the active page. It's gone when you are on that specific page unless you hover over it. 

I have been stumped trying to figure out how to keep that link in the header up when on that page. Trying different code injections, more CSS, and ways to get it back. 

ANY ideas or help would be so appreciated. 

Thank you so much!! 

Taylor

add !important after background-image code, something like this

.header-announcement-bar-wrapper [href="/work"] {
    background-image: url(https://static1.squarespace.com/static/63daffe5e884430a69a0ef9d/t/63e48126e125c02a6cfb3aca/1675919654080/WORK.png) !important;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent !important
}

Hi! 

Thanks so much for the reply. I've tried adding !important after different lines of code and like your example above but nothing seems to work! The active link is still gone unless you hover it still! 

Anything else I could try? 

Cheers,

Taylor

On 3/6/2023 at 3:30 PM, StingRay91 said:

Hi! 

Thanks so much for the reply. I've tried adding !important after different lines of code and like your example above but nothing seems to work! The active link is still gone unless you hover it still! 

Anything else I could try? 

Cheers,

Taylor

I see it is fine now. You try checking it again