logo shrinks to small when changing screen size

Hi there,

Did you change the breakpoint setting to 1600px?
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

Is that intended?

yes, so maybe you can help with that!

We don't like how the buttons drop below the menu. Is there a way to just resize them or keep them after (Not Under) the menu? We put it at 1600 because we like it going to hamburger menu rather than dropping below but ideally we want the menu items to remain visible.

Hi Tim,

If you would like the menu items and the buttons to appear in one row, you would need to reduce the size of the buttons, and the font-size and width of the menu-items.

You could try that out first and see how it goes. You’ll need to revert the mobile menu breakpoint to 768px to test.

You can modify the menu item width through Appearance > Customize > Layout > Primary Navigation. Then, for the font-size, in Customize > Typography, set the font-size for Primary menu items in the typography manager.

Reduce the size of the buttons as well by reducing probably the text font-size and the padding.

Otherwise, if that doesn’t pan out, you may add a code like this to force the site logo to be the same size for tablet and mobile:

@media (min-width: 848px) {
    .site-logo.mobile-header-logo img {
        width: 410px;
        height: auto;
    }
}

@media (min-width: 769px) and (max-width: 849px){
    .site-logo.mobile-header-logo img {
        width: 300px;
        height: auto;
    }
}

I created two media queries to avoid items showing up in two rows when the space in the header isn’t enough.

Hope this helps!

Thanks! That seemed to help but it stretched my logo for tablet. Can you help?

Can you try modifying height: auto;to height:auto !important;?

Hmm. That didn't work. Any ideas?

Not seeing the CSS has been updated:
https://www.screencast.com/t/TGJ9nR9Sqe

Does it work in the customzier? If so, try clear your cache.

I tried it and it didn't work. So I removed all previous CSS and turned the mobile sticky header off until we can figure out a fix.

Hi there,

sorry for the back and forth, could your remove ALL CSS related to the logo image size.

Then add this CSS:

#mobile-header .site-logo.mobile-header-logo img, 
#mobile-header .site-logo.mobile-header-logo {
    height: 80px;
}

That worked like a charm David! Thank you! This also fixed the sticky header issue. So I'll mark that resolved as well.

Awesome - glad to be of help :)