- This topic has 8 replies, 3 voices, and was last updated 3 years, 1 month ago by Elvin.
-
AuthorPosts
-
February 11, 2021 at 2:37 am #1654108Rachel
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,
RachelFebruary 11, 2021 at 6:33 am #1654323DavidStaffCustomer SupportHi 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
classFebruary 11, 2021 at 5:52 pm #1655172RachelHi 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,
RachelFebruary 11, 2021 at 6:12 pm #1655184RachelWhen 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)
}February 11, 2021 at 7:37 pm #1655230ElvinStaffCustomer SupportHi 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
February 11, 2021 at 7:51 pm #1655240RachelHi,
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..
February 11, 2021 at 8:08 pm #1655248ElvinStaffCustomer SupportThe 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.
February 11, 2021 at 9:09 pm #1655271RachelHi,
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.
February 11, 2021 at 9:17 pm #1655272ElvinStaffCustomer SupportNo problem. Feel free to open up new topics if you have any other questions. 😀
-
AuthorPosts
- You must be logged in to reply to this topic.