Header is overlapping main content

I’m having some kind of layout problem. My main body seems to be overlapped by my header. This issue is resolved once the client resizes his screen. Do you know any workaround beside from a fixed position header, top 0 and a padding-top for the main-body with the header’s size?

Image is a little bit suboptimal since I had to blur everything, but you might guess that the upper row is smaller than the fourth box :sweat_smile:

A little suboptimal, yes :joy: Are you able to share the code you’re using to create the layout to help us figure out what might be going on?

Sure :joy: I’m basically using a Vaadin Start template with a top menu layout: https://gist.github.com/Summerfeeling/5c64df85a8e717330c470c19a865af1c

Sorry, I just saw that I posted the wrong link :person_facepalming:

Ok. Have you changed any code from the generated? Added any CSS?

Beside from adding an image to the header and moving the menu bar to the center, no. Added some CSS but nothing relating to the header/body/start view

First thought: you don’t define the size of the element you added to the header/navbar. The first paint is done without the image loaded, so its size is small, and the App Layout navbar is sized based on that. Then the image is loaded, and the element resizes, but App Layout does not update the navbar height measurements.