Increasing header height without disturbing other placeholders

Increasing header height without disturbing other placeholders

Hi all,

I'm using the Liverpool theme and I tried to increase the height of the header webblock.
So I changed the size of the image in the header to have a min height. This give the result I'm looking for but the other placeholders (Title, Action and Maincontent) keep the same position. So partially the menu is now covering the title.

What’s the correct way of increasing the header without disturbing the other placeholders?

So I found the problem.
in the CSS of the header is the position fixed

.Header {
    position: fixed;

And normally the main content starts 105px from the top

.Content {
    padding-top: 105px;
This is standard Liverpool theme.
So if you want to increase the header with for example 20px then you should add the 20px to the padding-top.
Are there CSS Ninjas here that have a better solutions, because mine is not very dynamic?

Hello Martijn,

First of all, sorry for the late reply, but since you posted this issue outside of the LiverpoolTemplate Discussions, we didn't catch the post immediately.

The Liverpool Template actually dependes on that structure to work properly, so there's actually no better or more dynamic way to do what you need.

Best Regards,
Samuel Jesus

Hi Samuel,

No problem, in the beginning I thought that this was general OutSystems behaviour.
Thanks for verifying my solution.

Kind regards,
Martijn Habraken