Jump to content

Slight 'jump' in navigation when scrolling...

Go to solution Solved by Ziggy,

Recommended Posts

I'm trying to find a way to keep my navigation in the 'fixed position'. But when I start to scroll - there is a very slight jump/transition where the nav snaps to a slightly shorter height. Is there a way to get rid of this change in height - to where it just stays consistent all the time? PS - I'm seeing this happen on both desktop and mobile. Thanks!

Here is link to site:

https://crane-smilodon-sy2y.squarespace.com/menu

Edited by pieper
Link to comment
  • Solution

Add this to Custom CSS:

.tweak-fixed-header:not(.sqs-edit-mode-active):not(.sqs-site-styles-active) .header.shrink .header-announcement-bar-wrapper {
    padding-top: 2.3vw;
    padding-bottom: 2.3vw;
}

 

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
Just now, pieper said:

Worked like a charm @Ziggy - appreciate the quick feedback!

No worries, happy to help!

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

Looks like that CSS needed to be in a media query, can you replace with this:

@media only screen and (min-width:768px) {
  .tweak-fixed-header:not(.sqs-edit-mode-active):not(.sqs-site-styles-active) .header.shrink .header-announcement-bar-wrapper {
    padding-top: 2.3vw;
    padding-bottom: 2.3vw;
  }
}

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

Hmmm....still seeing it happen. You know what else I see (that might be causing it on mobile) - is that there is also a slight zoom into the header (background) photo when I start to scroll on mobile..?

You've already solved 90% of my troubles - so only take a quick second look if you're feeling extra generous this morning 🙂

Much appreciated!

Link to comment

Try adding this:

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header .header-announcement-bar-wrapper {
    padding: 6vw;
  }
}

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

Nope - still got it happening on mobile 😞

I know it's minimal - and the average customer might never notice it - but it will drive the perfectionist in me a little crazy haha...

Oh well - drop another note if you think of anything else - but otherwise carry on with your day - and thanks for your wizardry!

Link to comment

Okay, last try...maybe! Replace the previous one with this:

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header .header-announcement-bar-wrapper, .header.shrink .header-announcement-bar-wrapper {
    padding: 6vw;
  }
}

 

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

Dang - nope.

Just to make sure - this is how I have my custom CSS set up:

// NAV CONSISTENT HEIGHT //

@media only screen and (min-width:768px) {
  .tweak-fixed-header:not(.sqs-edit-mode-active):not(.sqs-site-styles-active) .header.shrink .header-announcement-bar-wrapper {
    padding-top: 2.3vw;
    padding-bottom: 2.3vw;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header .header-announcement-bar-wrapper, .header.shrink .header-announcement-bar-wrapper {
    padding: 6vw;
  }
}

Link to comment

Try this change:

@media only screen and (min-width:768px) {
  .tweak-fixed-header:not(.sqs-edit-mode-active):not(.sqs-site-styles-active) .header.shrink .header-announcement-bar-wrapper {
    padding-top: 2.3vw;
    padding-bottom: 2.3vw;
  }
}

@media only screen and =(max-width: 767px) {
  .header .header-announcement-bar-wrapper, .header.shrink .header-announcement-bar-wrapper {
    padding: 6vw !important;
  }
}

 

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

Haha nope - that broke it all. It removed my logo overlapping the banner/background image, etc...

Sorry - I'm sure this is gonna drive you crazy as well.

I know it feels SO GOOD to solve coding/CSS problems. Of course I rely on the help of people like you - but I try my best to understand what's happening via code - and it feels like a big WIN to 'beat the system'.

(So I know it's kinda of infuriating to NOT find a solve).

Link to comment

Try just adding an important after the second one, not sure why that code isn't sticking:

// NAV CONSISTENT HEIGHT //

@media only screen and (min-width:768px) {
  .tweak-fixed-header:not(.sqs-edit-mode-active):not(.sqs-site-styles-active) .header.shrink .header-announcement-bar-wrapper {
    padding-top: 2.3vw;
    padding-bottom: 2.3vw;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header .header-announcement-bar-wrapper, .header.shrink .header-announcement-bar-wrapper {
    padding: 6vw !important;
  }
}

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

Wow ok - so mobile is now working great!

Desktop is doing a weird thing where when I load a page - it loads perfectly - but only for a split second. Then all the styling goes away (logo doesn't overlap anymore, nav gets extra tall...but this only lasts for a second - then it snaps back to how it should look and works great. But this happens on every page load.

SO CLOSE!

Link to comment

I'm not seeing that issue on desktop or mobile, you may want to test in an incognito window, or clear your browser cache before testing.

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.