Website header text jumping down upon opening pages

[Tessila]

My website header text (headline and sub-headline) always starts at a certain spot, then jumps down a little bit on the header image after a second when I open a page. Then on mobile, the text still jumps down, but also the header image zooms in slightly as well. This happens with all my pages sitewide. I'm using Birdseye theme.

I started having the issue after I was using ChatGPT to create custom CSS for fixing some other things on the banner, but Chat doesn't help with this current issue I'm having. I know nothing about editing CSS, so I'm scared to try anything on my own. I'm guessing it's just a small tweak in my CSS, but I don't know where and what, so I need some help.

This is the CSS I'm currently using, which is in my _nav.less code editor category:

Spoiler

/* Header */

.birdseye-header {
position: fixed;
top: 0;
z-index: 12;
width: 100%;
max-width: 100%;
padding: 10px 10px;
color: @Bg;
border-color: @Bg;
box-sizing: border-box;
.transition(~'background-color 300ms ease, color 260ms ease, padding 180ms ease');
backface-visibility: hidden;
-webkit-backface-visibility: hidden;

.container {
display: table;
overflow-y: hidden;
width: 100%;
max-height: 100px;
}

.hamburger {
display: none;
box-sizing: initial;
}
}

.birdseye-header .logo {
display: table-cell;
overflow-y: hidden;
vertical-align: middle;

* {
display: block;
}

a {
margin-right: 400px;
.transition(opacity 200ms ease);

&:hover {
opacity: .6;
}
}

#wsite-title {
max-width: 400px;
font-family: @font2;
font-size: 30px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.03em;
.transition(~'font-size 260ms ease');
}

img {
overflow: hidden;
max-width: 400px;
max-height: 400px;
}
}

/* Nav */

.nav {
display: table-cell;
vertical-align: middle;

ul {
float: right;
max-width: calc(~'100vw - 480px');
overflow: hidden;
}

li {
display: inline-block;
margin: 5px 5px 5px 0;
}

.wsite-menu-item {
display: block;
padding: 12px 20px;
border: 1px solid transparent;
font-family: @font2;
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
.transition(opacity 300ms ease);
}

li:not(.wsite-nav-cart)#active > .wsite-menu-item {
border-color: inherit;
}

li .wsite-menu-item:hover {
opacity: 0.6;
}

#wsite-nav-cart-a {
padding-right: 0;
}

#wsite-nav-cart-num {
display: inline-block;
min-width: 10px;
padding: 2px 3px;
margin-left: 2px;
text-align: center;
background: @Bg;
color: @fill;
}
}

.mobile-nav {
display: none;
}

/* Subnav */

#wsite-menus {

> .wsite-menu-wrap > .wsite-menu .wsite-menu {
margin: 0 -1px;
}

.wsite-menu {
position: relative;
background: @Bg;
.box-shadow(inset 0px 0px 0px 1px @fill);

li a {
background: transparent;
color: @fill;
font-family: @font2;
font-size: 12px;
font-weight: normal;
line-height: normal;
text-transform: uppercase;
letter-spacing: 0.05em;
border: none;

&:hover {
background: @Shade;
.transition(opacity 200ms ease);
}
}
}

.wsite-menu-arrow {
display: none;
}
}

/* Fixed Nav */

body.affix .birdseye-header {
position: fixed;
.box-shadow(0px 1px 2px 0px @Shade);
padding: 10px 40px;

.logo #wsite-title {
font-size: 24px;
}

.wsite-menu-item {
padding: 10px 20px;
}
}

body.affix,
body.no-header-page,
body.splash-banner-page {
.birdseye-header {
background: @Bg;
color: @fill;
border-color: @fill;

.nav #wsite-nav-cart-num {
background: @fill;
color: @Bg;
}

.hamburger {
span,
span:before,
span:after {
background: @fill;
}
}
}

&.alt-nav-on {
.birdseye-header {
background: fade(@fill, 90);
color: @Bg;
border-color: @Bg;

.nav #wsite-nav-cart-num {
background: @Bg;
color: fade(@fill, 90);
}

.hamburger {
span,
span:before,
span:after {
background: @Bg;
}
}
}
}
}

/* Mobile app + Checkout page exemptions */

body.wsite-checkout-page .birdseye-header,
body.wsite-native-mobile-editor .birdseye-header {
position: absolute !important;
}

/* Force header to always look like the scrolled/affix state */

.birdseye-header {
padding: 10px 40px !important;
background: @Bg;
color: @fill;
border-color: @fill;
box-shadow: 0px 1px 2px 0px @Shade;
}

.birdseye-header .logo #wsite-title {
font-size: 24px !important;
}

.birdseye-header .wsite-menu-item {
padding: 10px 20px !important;
}

/* Always apply scrolled alignment styles */
.birdseye-header .logo #wsite-title {
font-size: 24px !important;
}

.birdseye-header .wsite-menu-item {
padding: 10px 20px !important;
}

.birdseye-header {
padding-left: 40px !important;
padding-right: 40px !important;
}

/* Let background/padding-top show only on scroll */
body:not(.affix) .birdseye-header {
background: transparent !important;
box-shadow: none !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}

[rtfulk]

@Tessila Welcome to the community. On the Birdseye theme, your header text jumps down after a second, and on mobile the header image zooms when this happens. It sounds like a CSS transition or height adjustment is triggering after page load—likely tied to the .affix or .birdseye-header styles you’ve overridden.

1. Remove “transition” from header top/padding logic

This will stop delayed movement on page load:

.birdseye-header {
transition: none !important;
}

2. Ensure consistent both states use same padding/position

Make sure mobile and desktop have the same baseline padding so nothing shifts later:

.birdseye-header,
body:not(.affix) .birdseye-header {
padding-top: 10px !important;
padding-bottom: 10px !important;
}

3. Prevent image zoom on mobile

You can lock the banner size by disabling background-size change:

@media (max-width: 768px) {
.birdseye-header .header-image {
background-size: cover !important;
transition: none !important;
}
}

Always, backup your original code before making any changes. Copy and paste these snippets into your CSS editor (the same file where your existing overrides are). Save and publish, then test your site again in both desktop and mobile view

Hopefully this will fix your issue.

[Tessila]

Thank you for your answer!

I apologize for my ignorance, but I'm still slightly confused. Should I replace this:

.transition(~'background-color 300ms ease, color 260ms ease, padding 180ms ease');

with this?:

transition: none !important;
}

And add the other two you gave to the bottom of my code? I tried a couple different methods using the code you gave, and they only seemed to make the whole site wonky without fixing the issue. It made the top banner in a fixed position instead of only appearing on scroll, and also adding a white boarder around the header, and on the homepage (I didn't check other pages) it made the content move to the far left instead of centered.

Again, I apologize for my ignorance, as I know nothing about CSS code and where to put anything.

[rtfulk]

@Tessila You're fine, I still struggle with CSS myself.

This should fix the problem, just replace your code with this. As ALWAYS BACK UP your work. Before you start.

/* Fixed Birdseye Header CSS - Cleaned & Corrected */

/* General Header Styles */
.birdseye-header {
position: fixed;
top: 0;
z-index: 12;
width: 100%;
max-width: 100%;
padding: 10px 40px !important;
color: @Bg;
border-color: @Bg;
box-sizing: border-box;
background: @Bg;
box-shadow: 0px 1px 2px 0px @Shade;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: none !important;
}

.birdseye-header .logo {
display: table-cell;
overflow-y: hidden;
vertical-align: middle;
}

.birdseye-header .logo * {
display: block;
}

.birdseye-header .logo a {
margin-right: 400px;
transition: none !important;
}

.birdseye-header .logo a:hover {
opacity: 0.6;
}

.birdseye-header .logo #wsite-title {
max-width: 400px;
font-family: @font2;
font-size: 24px !important;
font-weight: 700;
line-height: 1 !important;
text-transform: uppercase;
letter-spacing: 0.03em;
transition: none !important;
}

.birdseye-header .logo img {
overflow: hidden;
max-width: 400px;
max-height: 400px;
}

/* Navigation */
.nav {
display: table-cell;
vertical-align: middle;
}

.nav ul {
float: right;
max-width: calc(100vw - 480px);
overflow: hidden;
}

.nav li {
display: inline-block;
margin: 5px 5px 5px 0;
}

.nav .wsite-menu-item {
display: block;
padding: 10px 20px !important;
border: 1px solid transparent;
font-family: @font2;
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: none !important;
}

.nav li:not(.wsite-nav-cart)#active > .wsite-menu-item {
border-color: inherit;
}

.nav li .wsite-menu-item:hover {
opacity: 0.6;
}

#wsite-nav-cart-a {
padding-right: 0;
}

#wsite-nav-cart-num {
display: inline-block;
min-width: 10px;
padding: 2px 3px;
margin-left: 2px;
text-align: center;
background: @Bg;
color: @fill;
}

/* Subnav */
#wsite-menus > .wsite-menu-wrap > .wsite-menu .wsite-menu {
margin: 0 -1px;
}

#wsite-menus .wsite-menu {
position: relative;
background: @Bg;
box-shadow: inset 0px 0px 0px 1px @fill;
}

#wsite-menus .wsite-menu li a {
background: transparent;
color: @fill;
font-family: @font2;
font-size: 12px;
font-weight: normal;
line-height: normal;
text-transform: uppercase;
letter-spacing: 0.05em;
border: none;
transition: none !important;
}

#wsite-menus .wsite-menu li a:hover {
background: @Shade;
opacity: 0.8;
}

.wsite-menu-arrow {
display: none;
}

/* Affix (Scrolled) State */
body.affix .birdseye-header {
box-shadow: none !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
transition: none !important;
}

body.affix .birdseye-header .logo #wsite-title {
font-size: 24px !important;
}

body.affix .birdseye-header .wsite-menu-item {
padding: 10px 20px !important;
}

/* Splash/Header exceptions */
body.wsite-checkout-page .birdseye-header,
body.wsite-native-mobile-editor .birdseye-header {
position: absolute !important;
}

/* Mobile Styles */
@media (max-width: 768px) {
.birdseye-header,
.birdseye-header .header-image {
background-size: cover !important;
transition: none !important;
}
}

/* Optional: Force Always Visible Header Background */
body:not(.affix) .birdseye-header {
background: @Bg !important;
box-shadow: 0px 1px 2px 0px @Shade !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}

[Tessila]

This is what it looked like previously:

And this is what happened after replacing my CSS with the updated one you gave now:

[rtfulk]

To remove the line go to the code circled in red in the imae and replace it with this.  

border: none !important;

To restore your navigation icons add the !important; to the two areas in the next photo that is in read.

You will also see a red arrow pointing below the word Display. underneath that add this string.

opacity: 1 !important;

As always BACK UP your work before making changes.

[Tessila]

I did exactly as you instructed, with the little tweaks in the updated CSS, and it didn't seem to change anything. The black line is still there, the header text jumps, and the navigation menu is absent.

[rtfulk]

so what I gave you put a line in the photo and removed the icons in the upper right hand corner? Did the jumping stop?

[Tessila]

Yes, that's correct. The line disappears upon scroll, though. The jumping did not stop. 

[rtfulk]

@Tessila I don't know what else to tell you to try. Hopefully someone else will jump in and give some input. I was hoping some of my suggestions would fix your problem.

[Tessila]

Thank you so much for you trying, anyway! I really appreciate it.

[rtfulk]

You're welcome

[JTPets]

I don't code, but I use AI for my coding needs, this is what my AI has to say on the issue:

Hi Tessila! It sounds like you’ve been super patient with a frustrating issue — and you're right to suspect it’s a CSS or JavaScript-triggered layout shift. This “jump” in header text is often caused by dynamic layout recalculations or delayed application of styles (like position: fixed, padding/margin adjustments, or JavaScript-affixed classes like .affix being applied after page load).

Let’s work through a minimal and safe fix that should stabilize your header text and prevent the mobile zoom effect, without removing your fixed-on-scroll behaviour or breaking layout:

---

✅Add This to the very bottom of your custom CSS:

/* Prevent header jump and mobile zoom */

.birdseye-header {
  transition: none !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

body.affix .birdseye-header {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.birdseye-header .logo #wsite-title,
.birdseye-header .logo #wsite-subtitle {
  transition: none !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .birdseye-header .header-image {
    background-size: cover !important;
    transition: none !important;
  }
}

---

🛠What This Does:

• Disables all transitions on the header and title/subtitle so there's no post-load movement.

• Locks in consistent padding for both regular and scrolled states to avoid layout shifts.

• Prevents mobile zoom on the background header image.

---

🧪 How to Test:

1. Add this at the bottom of your existing CSS (do not replace the whole file).

2. Save and publish the changes.

3. Clear cache or test in incognito.

4. Check a few pages — especially ones with long and short content — both on desktop and mobile.

---

If this still doesn't fully fix the issue, it's likely a JavaScript-triggered .affix class or a layout shift caused by a slow-loading font or image. I can help you find and freeze that too if needed.

Let me know if you want a version that completely disables the scrolling behaviour and just keeps the header fixed from the start. Otherwise, this approach preserves your design while fixing the glitch.

[Tessila]

Thank you! I did try this now, but it didn't change anything, unfortunately.

[Tessila · Accepted solution]

I solved this finally, by simply adding this to the SEO header code in Settings:

<style>

.banner-wrap .container { padding: 0px !important; }

</style>

ChatGPT finally gave me some links on Squarespace forum to other resolved posts with this same issue, and one of them was this simple fix. I should've just looked for the same issues on this forum in the first place, before posting another post. 😅 Thank you guys for your attempts in helping me!

[tranguyen]

That's a great find @Tessila !

I've marked your reply as the solution. That way, other sellers looking to implement something similar can easily find how you have solved it!