[Resolved] menu item height – changes mobile header height

Home Forums Support [Resolved] menu item height – changes mobile header height

Home Forums Support menu item height – changes mobile header height

  • This topic has 29 replies, 3 voices, and was last updated 5 months ago by Stephen.
Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #2152786
    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

    #2153061
    David
    Staff
    Customer Support

    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;
        }
    }
    #2153083
    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

    #2153119
    David
    Staff
    Customer Support

    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 )

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

    #2153157
    David
    Staff
    Customer Support

    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

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

    #2153820
    David
    Staff
    Customer Support

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

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

    #2153988
    David
    Staff
    Customer Support

    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…

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

    #2154218
    David
    Staff
    Customer Support

    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;
    }
    
    #2154511
    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

    #2154518
    David
    Staff
    Customer Support

    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

    #2154527
    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)

Viewing 15 posts - 1 through 15 (of 30 total)
  • You must be logged in to reply to this topic.