Hi all,

I am working on a website with the Construction template, which is great imo.
In this template, the header section is on top of the sections, originally the fullwidth section.
There is a uk-sticky-placeholder that takes care of this, as far as I can see.
This is the code:

<div class="uk-sticky-placeholder" style="margin: 0px;">

<header id="g-header" class="g-absolute-header" data-uk-sticky="{top:-700, animation: 'uk-animation-slide-top', media: 768}"

...</header></div>

I changed the header/menu in a way that its background is not transparent, so I have a solid colored 'block' on top of the sections that follow.
What I did, is giving the next section a padding-top with the same height, so that the content is not covered by the header.

Now that my project is almost finished, I am finetuning this for mobile. Now I discover, that this workflow is not ideal... because this gives some ugly shifting when a mobile phone is turned from portrait to landscape.

Now I am thinking of working with lots of breakpoints, styling the header with %vh in CSS and making the padding a variable depending on the screen dimensions.

Now I wonder, maybe it was easier to choose a template which has the header section not positioned on top of the following sections, so that the sections below the header always start where the header end, reading from top down... if you know what I mean.

Brings me to my question, is this easily configurable, changable along the way? Or is this a decision that has to be made in the beginning?
I think now I learnt what 'mobile first' means

Thanks for any advice on this topic!
With kind regards,
Stefan