[Resolved] menu item height – changes mobile header height

[Stephen]

http://www.stephenlavender.site

Hi, when I set – menu item height – for mobile screen size then the height of the mobile header also changes.

If I set the – menu item height – so the menu is OK then the header is too small and if I set it so the Header is OK then the Menu is too large.

– Can I set the menu item height and mobile header height separately please ?

Thanks
Stephen

[David]

Hi there,

one thing is you have this CSS ( in Customizer > Additional CSS ) – which is affecting the desktop and mobile logos.

.site-logo {
    flex-shrink: 0;
    padding: 20px 40px 10px 20px;
}

You can move that CSS inside an @media query to limit those styles to desktop only:

@media(min-width: 851px) {
    .site-logo {
        flex-shrink: 0;
        padding: 20px 40px 10px 20px;
    }
}

[Stephen]

Hi, yes of course you are right.

I did wonder about the LOGO padding effecting all screen sizes !

However I do still have the problem that when I set menu height at 70px to get a decent Mobile Header height then the actual drop down menu height is too big.

– How can I set the menu height so the drop down menu is good and also so the header is a good height ?

Thanks
Stephen

[David]

You can use this CSS to lock in your font size for the menu items:

@media(max-width: 850px) {
    .main-navigation .main-nav ul li a {
        line-height: 45px !important;
    }
}

Then your Customizer changes will only affect the header items ( logo, hamburger, search )

[Stephen]

perfect thank you,

I’ve a few CSS @media queries now so I’ll try making sure I put them in the same ones.

I’ve tried ordering additional CSS with header CSS at start and footer CSS at the bottom and large screen size CSS before small screen size CSS.

– Does it matter what order additional CSS is in ?

Thanks
Stephen

[David]

For this kind of CSS customisation, the CSS rules order doesn’t matter ‘too’ much.
But some general rules you can apply regarding order are:

start with low specificity global rules eg.

p {
    color: #FF0000;
}

followed by increasingly more specific rules:

.entry-content p {
    color: #00ff00;
}

And finally you device specific CSS in @media queries.
Regarding multiple max or min width @media queries then, max-widths should be descending:

@media(max-width: 768px) before @media(max-width: 420px)

And min-widths ascending:

@media(min-width: 420px) before @media(min-width: 768px)

These latter points are only relevant if you are wanting different styles on the same element for many different sizes

[Stephen]

Thats very good thank you.

I’ve swapped to Generatepress on my main site now from WP Astra and the performance rated by google pagespeed insight has gone up at least 10 points for every page and layout shift for mobile screen woocommerce single products has gone from 0.3 to 0.03.

Its a good theme.

Thanks
Stephen

[David]

That’s great to hear ! And glad to be of help

[Stephen]

Hi, actually just confirm the improvement in woo product layout shift is from having a thicker header rather than GP.

But its still faster anyway !

[David]

If you’re having a layout shift issue, raise a new topic and we can take a look.
But to note: there are several things related to Woocommerce plugin that have a CLS issue…

[Stephen]

Hi, I did open a topic about “woo single product mobile screen size CLS” which Leo replied to and didnt want to get into I think.

As far as I know the issue comes from how woo provides images dimension that make the gallery placeholder wrong so it shifts a bit.

If you’ve got any ideas how to improve it that would be great.

Thanks
Stephen

[David]

Yeah – woo has some image sizing issues, and dynamic widgets in sidebars can take time to load. All of which can result in CLS.

You can try throwing some CSS at the problems:

@media(min-width: 769px){
    .single-product.left-sidebar .site-content .content-area {
        margin-left: auto;
    }
    
}

.woocommerce div.product .woocommerce-product-gallery  {
    min-height: 354px;
}

[Stephen]

Hi, I did think that if anyone had a workaround it would be you guys !

I’ve tried it, refreshed CSS and sadly still getting 0.267 shift before and after.

Could the 354px min-height vary for different sites?

Thanks
Stephen

[David]

The min-height i measured off your site, i updated the code above so it will apply to small screens as well. Give that a shot

[Stephen]

Hi, unless I cant read properly then thats the same

is it the media call part which should change for smaller screens

@media(min-width: 769px)

[Author]

Posts