Jump to content

Make first section 'sticky' with nav

Go to solution Solved by Ziggy,

Recommended Posts

I'm making a big site and I really need a secondary nav but until that is implemented by our SS gods I'm winging it.

I want to make the first section of every page 'sticky' so it forms a kind of sub-menu to my main nav.

https://buffalo-wisteria-c8kf.squarespace.com/

Password is secondnav

Not a css expert so any help would be amazing. I do have to implement it on a zillion pages so if there was a way of making it global and then I could switch it off on just the few that don't need it that would be heaven.

Edited by kateatkins
added web address
Link to comment
  • Solution

You can try this Custom CSS, it'll target the first section on every page, but can be targeted to just one page.

#page .page-section:nth-child(1) { 
  position:sticky;
  top:0;
  z-index:999;
}

Let me know how you get on.

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
11 hours ago, Ziggy said:

You can try this Custom CSS, it'll target the first section on every page, but can be targeted to just one page.

#page .page-section:nth-child(1) { 
  position:sticky;
  top:0;
  z-index:999;
}

Let me know how you get on.

AMAZING. Thank you so much! That worked a treat. But how do I turn it off on the pages I need it not to happen on? It's really messed with the home page. Hehe.

Link to comment

CSS rulesets that can be problematic while trying to edit a page, the selector can be prefixed by html:not( .squarespace-damask )

Pseudo code...

html:not( .squarespace-damask ) your-selector {

  some property value pairs here;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.