[Resolved] Header spacing with mobile device

Home Forums Support Header spacing with mobile device

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #945363
    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).

    #945379
    David
    Staff
    Customer Support

    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.

    #945425
    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

    #945426
    David
    Staff
    Customer Support

    Awesome – really appreciate the great feedback

    #945457
    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!

    #945823
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.