How to properly increase header height?

Support

AI-generated summary

Increasing Header Height without Breaking Sticky Feature

The discussion revolves around properly increasing the header height to accommodate a larger logo without breaking the sticky feature. Canapin initially faced issues with the header overlapping content and glitching when trying to increase its height.

smrtey suggested adjusting the padding-top of #main-outlet to match the increased header height, but Canapin clarified that they wanted the header to be twice as tall and maintain its default height when sticky.

Despite initial challenges, Canapin eventually managed to achieve the desired result, although with some minor “jumping” issues when scrolling slowly.

1

Hi,
I’d like to increase the header height:
image
In order to display a bigger logo (the header would keep the default height on mobile).

I did some tries, but I didn’t achieve it since increasing the height (and the beneath content top margin so the header doesn’t override it with its increased height) would cause the sticky feature to glitch. It prevented to scroll or made the content “jump”.

Is there any proper way to increase the header height without breaking anything?

2

Did you try adjusting

#main-outlet {
    padding-top: 5.8572em;
}

For example

.d-header {
    height: 8em;
}
#main-outlet {
    padding-top: 9.8572em;
}

844×427 13.8 KB

836×377 16 KB

3

Yes I did. I should add that I want the header about twice as tall as the original height and keeping the default height when it is sticky (which may be the main issue).

4

Well I did manage to do it.
I’m not sure why I encountered such blocking issues… There is still a bit of jumping but it’s just a few pixels so don’t see it if you’re not trying to see it by scrolling extrêmely slowly.
I also have custom content on top of the header so it may have played a role in the issue I encountered.