- This topic has 7 replies, 2 voices, and was last updated 2 years, 6 months ago by
David.
-
AuthorPosts
-
January 5, 2020 at 1:57 am #1122390
Kevin Wabiszewski
Hello, I am currently using WP Rocket to lazyload images, but when I enable this option it causes the menu icon on mobile to fall below the logo and search icon.
The issue only seems to happen on phones. I was wondering if there is a fix to this using CSS or some other method with Generate Press?
I believe this is the CSS in my theme related to the header formatting on mobile:
.main-navigation {
border-bottom: 2px #ba1f1f solid;
}.post-template-default .widget_search {
margin-top: 51px;
}
@media (max-width: 768px) {
#mobile-header {
background-color: #ffffff;
}
.main-navigation .main-nav ul li a {
background-color: #3f3f3f;
}
button.menu-toggle {
color: #000000;
}
}button.menu-toggle:hover,
button.menu-toggle:focus,
.main-navigation .mobile-bar-items a,
.main-navigation .mobile-bar-items a:hover,
.main-navigation .mobile-bar-items a:focus {
color: #000;
}Thanks for your help/time
January 5, 2020 at 5:46 am #1122507David
StaffCustomer SupportHi there,
The best thing is to exclude that image from the Lazyloader, especially as the logo should be displayed immediately, – WPRocket provide this article on how to do that:
https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images
Easiest method is Example 2: Exclude an image based on its filename
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 5, 2020 at 11:39 am #1122892Kevin Wabiszewski
Thanks for getting back to me, David. Since it is the three lines and the word menu button that fall below the logo when lazyload is enabled with mobile, do you think it’s an issue with the logo lazyloading or the image used to generate the 3 lines next to the word menu?
Can I used the snippets plugin to do the second option they recommend? “Disabling LazyLoad on an image class”
What do you recommend?
January 5, 2020 at 5:43 pm #1123094Tom
Lead DeveloperLead DeveloperIt’s most likely the logo – the three lines/text aren’t images.
The mobile header logo doesn’t have a specific class, but we can tell WPRocket not to lazy load it with a filter:
add_filter( 'generate_mobile_header_logo_output', function( $output ) { if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) { return $output; } $settings = wp_parse_args( get_option( 'generate_menu_plus_settings', array() ), generate_menu_plus_get_defaults() ); return sprintf( '<div class="site-logo mobile-header-logo"> <a href="%1$s" title="%2$s" rel="home"> <img src="%3$s" data-no-lazy="1" alt="%4$s" /> </a> </div>', esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ), esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ), esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ), esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ) ); } );
Adding PHP: https://docs.generatepress.com/article/adding-php/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 5, 2020 at 7:17 pm #1123133Kevin Wabiszewski
That’s exactly what I needed Tom. Thanks so much!
January 6, 2020 at 9:48 am #1123754Tom
Lead DeveloperLead DeveloperYou’re welcome 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 13, 2020 at 3:19 pm #1362506Shako
Hey Tom,
I have the same problem but for both, mobile and desktop versions.
Tried this code but getting this error“This is the largest contentful element painted within the viewport. Learn More
<img src="https://mywebsite.com/logo.png" data-no-lazy="1" alt="Website Logo">
”Is there any solution for both mobile and desktop?
Thank you
July 14, 2020 at 7:50 am #1363262David
StaffCustomer SupportHi there,
can you raise a new topic where you can privately share your site URL and we can take a look
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.