Okay
  Public Ticket #2420768
Paralax on Mobile Header
Closed

Comments

  • jtnorth started the conversation
    May 28, 2020 at 5:32pm

    Hey again,

    Is there a way to preserve parallax scroll on a page header when appearing on mobile? We are using a video for a full page header, but have it set to use preview image on mobile. We've un-checked the option in the general setting to remove parallax on mobile, but still the effect isn't working.

  •  8,884
    Tahir replied
    May 29, 2020 at 1:57am

    Hey Again,

    I dont believe the Parallax applies to the Preview Image though you can use below css code to activate it .

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
    body[data-remove-m-video-bgs="1"] .mobile-video-image {
        background-attachment: fixed !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  • jtnorth replied
    May 29, 2020 at 2:40am

    Thanks Tahir!

    When I insert the code, the image becomes extremely large and there's still no parallax. I've attached a screengrab.



  •  8,884
    Tahir replied
    May 29, 2020 at 2:46am

    Try Purging your cache.

    1. Please clear your cache using this guide: https://themenectar.ticksy.com/article/6226/ .
    2. If you are using WP Rocket use this guide :  https://docs.wp-rocket.me/article/108-render-blocking-javascript-and-css-pagespeed#critical-path-css .
    3. For Woocommerce caching issues see: https://docs.woocommerce.com/document/configuring-caching-plugins/ . 


    Also it seems to work perfectly when added to the Live Browser : 

    1818815208.png

    Thanks

    ThemeNectar Support Team