Narrative Theme Whole Site jumps up when Header fades up

Solved
Highlighted
New Member
3 1 0

Hi, 

recently I've been working with the narrativ theme and I encoutered the issue, that my site makes a jump when the header fades away on scrolling. 
It happens on desktop as well as on mobile and it looks like this https://imgur.com/THWmaCL 

Sorry, I can't embed gifs here it seems..

Anyway, does anybody know what I need to do to make it stop jumping?
Maybe putting a blank box on top of the page or something, as a placeholder for the header? If yes, how and in which file can I do this?

Thanks in Advance

0 Likes
Highlighted
New Member
3 1 0

This is an accepted solution.

Solution: 

Found on Stackoverflow this hint
w
hich says:

position:fixed takes an element out of normal flow, it doesn’t influence the position of what comes after it any more. So if you had your element in normal flow before, and now take it out, of course the rest of the content “jumps”.

The easiest way around this – if your header’s height is known – would probably be to have it be position:absolute to begin with, because that also takes it out of the flow, so that you can take that into account from the start and keep the following content at bay via a margin or padding.

 

So I tried changing this passage in theme.scss.liquid

where I changed the position from relative to absolute

and also had to add the two following lines for left and right, or else the header would be squeezed together.

/*================ Site Header ================*/

.site-header {
position: absolute;
left: 0;
right: 0;
transition: transform 0.25s ease-out;
z-index: $z-index-header;
}

 

 However, now the header acts as an overlay on top of the page. 
Not sure how to fix this yet.

0 Likes