[Resolved] Ideal logo size (especially for mobile)

[Gary]

Hi,

I notice that many examples of GeneratePress seem to have the logo above the menu bar. Personally I usually prefer the logo to be on the same line as the header menu, logo to the left and menu to the right.

On one installation of GeneratePress premium my logo which is 350 pixels wide seems to display well on my Samsung mobile with the hamburger mobile menu to the right but on same line. Some responsive testing sites show however that on narrow mobiles the hamburger menu drops below.

On a 2nd installation of GeneratePress premium the logo is even narrower at about 320 pixels but the hamburger menu does not appear on same line of my Samsung mobile.

So what are the options for logo display? Ideally I want a logo that looks good on all displays. I’m sure there are various ways to handle this but wanted to know what most people seem to do. I can’t be the only one who feels the logo looks better on the same line as the menu.

Thanks
Gary

[Paul]

One option would be to display a different (more compact) logo on mobile devices:

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

Personally, I prefer having my menu drop below the logo when I get to smartphone-size screens. I add some custom CSS to center both the logo and the nav, and sometimes give the latter a different background colour.

You might find this post helpful.

[Gary]

Hi Paul,

OK I looked at the links you sent. The header looks fine on desktop and tablet, it’s just mobiles I want to resolve. The idea of having the menu (hamburger) below the logo and centred on mobile does sound like a good solution. I tried the code mentioned in the 2nd link and it did not seem to do anything. Can you confirm what code I should add if I want this to apply to mobile only and also where the code needs to be added. I added it to Customising – Additional CSS.

The domain in question is:

https://www.northamptonlocksmiths.co.uk

Look forward to your reply.

Gary

[Leo]

Give this CSS a shot:

@media (max-width: 768px) {
    .menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle {
        float: none;
        display: block;
        width: 100%;
        line-height: 45px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Gary]

Hi,

Yes that places the hamburger menu below the logo and centres it but the logo itself is left justified. How can I centre the logo too for mobile devices but keep it left justified for the desktop?

Gary

[Leo]

Try this:

@media (max-width: 768px) {
    .main-navigation .navigation-logo {
        float: none;
    }
    .main-navigation .navigation-logo img {
        margin: auto;
    }
}

[Gary]

Hi,

Instead of the first code or as well as? I added it to and no change. Replace first code and nothing centres.

Gary

[Leo]

Both code are needed. Can you leave them in?

[Gary]

Hi,

I’ve added both bits of code in the order given and the hamburger menu is centrered, the logo is not.

Gary

[Leo]

Can you try the adjusted code? https://generatepress.com/forums/topic/ideal-logo-size-especially-for-mobile/#post-349423

Thanks!

[Gary]

Hi,

OK I your link takes me to earlier in the thread. I assume you want this code alone this time? I’ve added it and the menu is now central but the hamburger menu is right justified.

Gary

[Leo]

Still need both blocks:
https://generatepress.com/forums/topic/ideal-logo-size-especially-for-mobile/#post-349381
https://generatepress.com/forums/topic/ideal-logo-size-especially-for-mobile/#post-349423

[Gary]

Hi,

Yes that seems to have worked.

Thanks
Gary

[Leo]

No problem!

[Author]

Posts