Header Logo and Icons Shaking on Atelier Theme

Shopify Discussion
1

Hi everyone,

I recently set up the Atelier theme on my Shopify store, and I’m experiencing a strange issue: my header logo and icons (account, cart, etc.) shake up and down while scrolling, especially on mobile.

Here’s what I’ve tried so far:

Created a completely fresh Atelier theme install

Removed all custom sections and JavaScript

Tested without adding any code

The shaking still occurs, so it seems like it might be a theme-related bug.

Has anyone else seen this with the Atelier theme? Or does anyone have suggestions for fixing the header/logo from shifting while scrolling?

Note: I confirmed this isn’t caused by my custom code because the issue persists on a fresh Atelier theme.

URL: runway

Thank you in advance for any help!

1 Like
2

Hi,

I wasn’t able to replicate this specific issue, but there seems to be many glitches throughout the site coming from custom sections:

image
image364×607 71.5 KB

What phone did you test it on?

4

hii @runwayfashion
Sticky header recalculating height

Atelier uses a sticky header with scroll detection.
On scroll, it often:

Adds a class like is-sticky
Changes header padding
Shrinks logo size
Adjusts line-height

That height change causes the shake.
Check this:
Open assets/theme.css (or base.css)

Search for:

.header--sticky
.is-sticky
.header--scrolled

If you see padding changes like:

.header {
  padding: 20px 0;
}

.header.is-sticky {
  padding: 10px 0;
}

That difference is the jump.
Fix:

Make both states the same height:

.header,
.header.is-sticky {
  padding: 15px 0 !important;
}

Logo resizing on scroll

Search CSS for something like:

.header__logo img

You might see:

.header__logo img {
  max-height: 60px;
}

.header.is-sticky .header__logo img {
  max-height: 40px;
}

That resize = vertical shift.
Fix:

Force one size:

.header__logo img {
  max-height: 50px !important;
}

Mobile browser toolbar resize issue (VERY common)

On mobile (especially Chrome + Safari), when you scroll:

The browser address bar hides
vh units recalculate
Elements using height: 100vh shift
Sticky headers appear to jump

Search CSS for:

100vh

If found, replace with:

min-height: 100svh;

or

min-height: 100dvh;

This fixes modern mobile viewport bugs.

Scroll JS recalculating on every pixel

Open:

assets/theme.js

Search for:

window.addEventListener('scroll'

If it’s recalculating header height on every scroll event without throttling, that can cause visible jitter.

But since you tested fresh install, this is likely built into Atelier.
Quick Test (Fastest Way to Confirm)

Temporarily disable sticky header:

Go to:
Customize → Header
If there’s an option
Disable Sticky header
If the shaking stops instantly → confirmed sticky behavior bug.
Most Likely Cause
90% of the time with Atelier:

It’s padding + logo size changing between normal and sticky states.

Make both states identical → issue gone.

If you’d like, send me:

A screen recording mobile
Or confirm if sticky header is enabled
And I’ll give you the exact CSS fix for Atelier specifically.

5

im testing on iPhone 16 pro max