[Resolved] Header spacing with mobile device

[mikeb82]

When viewing the website on smart phones, there is much more spacing than needed between the site title and the menu icon. This takes up valuable screen real estate that could be used for content.

How do I decrease the spacing between the site title and the menu icon?

How do I decrease the space after the menu icon?

Also, it wouldn’t be a bad thing if the menu icon was placed beside the site title (space permitting).

[David]

Hi there,

you can use the mobile header to align the title and the text:

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

If you want to keep the layout as is then you can reduce padding in the Customizer > Layout > Header for mobile only by going into mobile view. And you can reduce the space between the two elements with this CSS:

@media (max-width: 768px) {
    .inside-header .site-logo {
        margin-bottom: 10px;
    }
}

I would suggest the mobile header as positioning two clickable items too close together is not a good UI and may get flagged up by google as an issue.

[mikeb82]

Thanks David,

This information is exactly what I needed. I had not noticed the Mobile Menu option.

The more I work with GeneratePress the more I like it. You have the most comprehensive Customize setup I have worked with. Support is first rate, too.

Mike

[David]

Awesome – really appreciate the great feedback

[mikeb82]

BTW, I just experimented by adding a small logo to the mobile header. It displays on the same line as the mobile icon. Nice!

[David]

Great to hear that

[Author]

Posts