Jump to content

New Navigation Section - Sticky or Fixed Position for scrolling

Go to solution Solved by Ziggy,

Recommended Posts

Hello,

I'm new to Squarespace and UX Design, and I was wondering if there's a way where I can make the navigation bar/section of my portfolio remain fixed in position. I want to design it so that the navigation bar remains in the same position when the user is scrolling through the page. I will attach a screenshot of the navigation bar.

For some reason, I also run into an issue where I try adding certain HTML code blocks in the section and it doesn't get carried to the next section. The link to this page is https://www.christinechen.space/alphaevents.

Is there a way to fix these issues? Thank you in advance. 

navigation bar.jpg

Edited by CChen
Link to comment

You may want to explore a solution like this:

https://www.maryphilip.com/squarespace-shop/p/sticky-section

Not one I've used before, and there are others similar available with a quick Google.

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

Hi @Ziggy,

Do you happen to know other options where I can make a different section of the page a fixed position beside the header? I tried a few different codes, but none of them worked properly with my portfolio page. Thank you. 

Link to comment

Try this Custom CSS:

section[data-section-id="642244f51c4861330928032e"]  {
  position: sticky !important;
  -webkit-position: sticky !important;
  top: 110px;
  z-index: 99999;
}

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
  • Solution

No problem! Can you give a thumbs up and mark my reply as the solution to your post?

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

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.