Jump to content

Transparent fixed header blocking click-ability of page content

Go to solution Solved by Ziggy,

Recommended Posts

Hello,

I've got a transparent fixed header that I'm very happy with the look of, however I'm running into trouble with the page content going 'behind' the header, and becoming 'unclickable'. I've tried playing with the z-indexes but am finding that for every element I fix, it creates another that is improperly layered. Is there a better way?

site: https://calliope-ferret-m96p.squarespace.com/services

pw: future

Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution

The navigation is transparent, but not the clicking.

Try this:

.header-announcement-bar-wrapper {
  pointer-events:none;
}
.header-title-logo, .header-layout-nav-right .header-nav-list {
    pointer-events: all !important;
}

It might break the header usability, but worth a try!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 8 months later...

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.