Slight 'jump' in navigation when scrolling...

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

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

Just now, pieper said:

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

No worries, happy to help!

Hey actually @Ziggy - it's still happening on mobile. Is there any slight addition to that code that will allow our new rule to apply to mobile as well?

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;
  }
}

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!

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;
  }
}

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!

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;
  }
}

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;
  }
}

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;
  }
}

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).

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;
  }
}

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!

FYI - that loading problem does not happen on mobile

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.

You are correct: SOLVED!

I would buy you a beer in person at this new brewery if you were local - but I see I can buy you a coffee - so enjoy!

Have a great day - cheers