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

[Dimitar]

I have added the website url in the specific field for this in order to demonstrate what I am talking about.

When you switch to developer tools and resize the screen size and reach a point when the logo and the navigation cannot fit the screen the navigation turn to mobile style which is set on the Mobile Menu BreakPoint setting. So far so good

What I would expect is the Mobile navigation to remain on the same row (level) and be to the right. But it goes below the logo on another row. I’ve experimented with different settings, but could not get the desired effect. Any help would be appreciated.

Reference: https://kinsta.com/ (works as expected here)

My Header settings: https://ibb.co/QFdwj6x
My Navigation settings: https://ibb.co/g3KhqwW

Best regards,
Dimitar

[David]

Hi there,

you can use the Mobile Header:

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

[Dimitar]

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).

[David]

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

[Dimitar]

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

[Dimitar]

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!

[David]

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.

[Dimitar]

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

[David]

Glad to be of help

[Author]

Posts