Jump to content

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

Recommended Posts

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

Screenshot 2023-02-22 at 5.35.25 PM.png

Screenshot 2023-02-22 at 5.35.37 PM.png

Edited by StingRay91
Link to comment
  • Replies 3
  • Views 337
  • Created
  • Last Reply

Top Posters In This Topic

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
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.