Archived topic

Issue With Logo and Menu on Mobile

3 replies · Started by Oisin on June 25, 2021

Viewing posts 1–4 of 4

June 25, 2021 at 5:12 am #1834560

Hi,

On the mobile version of my site, my logo takes up most of the screen width and the menu icon gets pushed down. Seems to happen only at mobile screen below a certain size.

How do I get the logo to resize based on screen size to always allow the menu icon to sit on the same line as the logo.

Some sort of flexbox setup should work?

Thanks for your help.

June 25, 2021 at 5:34 am #1834589

Hi there,

you can adjust the size of the logo on smaller screens with this CSS:

@media(max-width: 420px) {
    .site-logo.mobile-header-logo img {
        height: 40px;
    }
}

June 29, 2021 at 3:56 pm #1839149

Hi David,

That did 'work', although it has caused a severe CLS issue.

You can see it on Google Page Speed Insights, where the logo loads, the menu loads under it, then the logo resizes and the menu moves to the top right.

I have NitroPack installed but I'm not sure it's causing the issue as the problem goes away when I remove the CSS code and still keep NitroPack enabled.

I have told NP not to lazy load the logo and the header image as well.

Any ideas?

Thanks David.

June 30, 2021 at 4:10 am #1839544

Yeah thats awkward as the way Nitro is loading the CSS for better performance means the themes CSS gets rendered first then our custom CSS.

I am not sure there is a CSS fix that could correct that without causing some issues.
Is it possible to change the Mobile Header Logo that occupies less horizontal space? Maybe Dublin being positioned below the first two words of the title?

This archived topic is closed to new replies.

Start building better websites today.