[Resolved] Sticky navigation logo width issues

Home Forums Support [Resolved] Sticky navigation logo width issues

Home Forums Support Sticky navigation logo width issues

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1654108
    Rachel

    Hi,

    I have a logo in my sticky navigation, and it displays correctly on mobile.

    But on desktop it is distorted, and it seems the height is fixed (to the menu height) but the width is auto, so it is stretching and distorting the logo.

    Can you advise how to resolve this issue? I would prefer to fix the logo width and height to reduce possible CLS issues, but not sure how to do that as I can’t see a place to specify the space for the logo or the width for the logo.

    Thanks,
    Rachel

    #1654323
    David
    Staff
    Customer Support

    Hi there,

    looks like the lazy loader is causing the issue. Most lazy loaders allow you to exclude images wit a specific CSS class. You can use the is-logo-image class

    #1655172
    Rachel

    Hi David, So I added the CSS class into WP Rocket to exclude the sticky logo from lazy loading. I have flushed the cache and CDN but it is still a problem.

    Strangely the logo displays correctly if I am logged in to the site, but from an incognito browser it is still distorted.

    Do you know why that may be the case? Can I specify the width of the logo anywhere?

    Thanks,
    Rachel

    #1655184
    Rachel

    When i open the site in two browsers, the image attributes are different in the incognito browser. It is pulling attributes from somewhere for the logo that fixes the width but I don’t know from where. This code below is not displayed when logged in to the site (where the logo displays correctly).

    img[Attributes Style] {
    width: 100px;
    aspect-ratio: auto 100 / 100;
    height:100px (This is actually strike through, but doesn’t show in this text editor)
    }

    #1655230
    Elvin
    Staff
    Customer Support

    Hi there,

    You have this CSS on your site:

    @media (min-width: 769px) and (max-width: 1024px), (min-width: 1025px)
    .main-navigation.sticky-navigation-transition .site-logo img, .main-navigation.sticky-navigation-transition .navigation-search input[type=search], .main-navigation.sticky-navigation-transition .navigation-branding img {
        height: 70px;
    }

    I’m not exactly sure how it’s added as it’s cached by autoptimize but adding width: auto; along with the height should keep the aspect ratio.

    @media (min-width: 769px) and (max-width: 1024px), (min-width: 1025px)
    .main-navigation.sticky-navigation-transition .site-logo img, .main-navigation.sticky-navigation-transition .navigation-search input[type=search], .main-navigation.sticky-navigation-transition .navigation-branding img {
        height: 70px;
        width: auto;
    }

    This is how it would appear: https://share.getcloudapp.com/z8uP4G1o

    #1655240
    Rachel

    Hi,

    I have a navigation logo in the Primary navigation section of the customiser. It is loaded as 100x100px.

    The primary navigation menu item height is specified as 70 px (and also the sticky menu item height as 70). There is nowhere there to specify the width in those settings. I assume that is where the height code is coming from.

    Do I remove that menu item height? There is nowhere in that section to specify a width, I assumed it would auto resize, but it isn’t..

    #1655248
    Elvin
    Staff
    Customer Support

    The primary navigation menu item height is specified as 70 px (and also the sticky menu item height as 70). There is nowhere there to specify the width in those settings. I assume that is where the height code is coming from.

    That’s correct. It’s from the customizer settings. You can’t specify the width within the customizer.

    Do I remove that menu item height? There is nowhere in that section to specify a width, I assumed it would auto resize, but it isn’t..

    width: auto; is something added automatically by the theme as –

    .navigation-branding img, .site-logo.mobile-header-logo img {
        height: 60px;
        width: auto;
    }

    – in one of its embedded inline stylesheets in <style id='generate-navigation-branding-inline-css'>but your caching plugin seems to have aggregated all the CSS and is messing it up.

    You can try temporarily disabling the caching plugin to check it out.

    #1655271
    Rachel

    Hi,

    Okay so WP Rocket has a setting for adding missing image dimensions which seems to be causing the issue (as it sees width-auto and changes it to the image width. This is to help reserve a space for the image and reduce CLS issues..

    So I have resized the logo image to match the height of the menu item height.

    It is an interesting issue though as CLS is front of mind to improve Google Web vitals.

    Going off now to see if any other images are impacted..

    Thanks for your help.

    #1655272
    Elvin
    Staff
    Customer Support

    No problem. Feel free to open up new topics if you have any other questions. 😀

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