On smaller screens navigation goes below logo when collapsed to Mobile Style.

Hi there,

you can use the Mobile Header:

https://docs.generatepress.com/article/mobile-header/

Thanks that does the trick. But even if I use the same image for the header it's resized when I use mobile header. Is it possible to achieve it as in the provided example. Only the menu to collapse to mobile, the header to remain the same size and both to be on the same line (row).

If you can activate the Mobile Header ill provide some CSS to keep the logo a similar size.

It's activated. I would appreciate the CSS.
Thanks!

Also one more question.

I want the Logo to the left and the navigation to the right so I've set header alignment left and navigation to be Float Right. I also want them not to be completely to the sides (left and right), so I've set header padding left and right to 200px.
On big screens, it looks good, but when you start shrinking the size the padding to the sides stays the same amount and very soon I have to switch the navigation to Mobile style.
But on other sites, I've seen (like the one given for example: https://kinsta.com/) when you start shrinking the size of the page the padding on the sides start to proportionally shrink and the menu is transformed to mobile when there isn't any more space left and right.

Is there a way to achieve the same effect? Is the header padding the right setting to use in order to keep the logo and the navigation a little bit more centered?

Thanks!

So this CSS to keep the logo the same size on mobile header:

.site-logo.mobile-header-logo img {
    width: 220px;
    height: auto;
}

So your content is set to 1020px width (+padding) so easiest thing to do is set a max width for the header:

.inside-header {
    max-width: 1020px;
}

Then put your Header padding back to 40px and 30px for mobile so it matches the content.

Thanks that did the trick and made it beautiful! Thanks!

Glad to be of help