revisor Posted November 10, 2020 Share Posted November 10, 2020 (edited) Site URL: https://www.gallerymilmar.com/ My website(7.1) currently uses a global fade in animation from the design settings, and I would like it not to reanimate the header every time I move between menu tabs. Is this possible to achieve with css and not code injections? Edited November 10, 2020 by Kailron Link to comment
Beyondspace Posted November 10, 2020 Share Posted November 10, 2020 2 hours ago, Kailron said: Site URL: https://www.gallerymilmar.com/ My website(7.1) currently uses a global fade in animation from the design settings, and I would like it not to reanimate the header every time I move between menu tabs. Is this possible to achieve with css and not code injections? Could you try this on custom css #header, #header * { opacity: 1 !important; transition: none !important; } Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
revisor Posted November 11, 2020 Author Share Posted November 11, 2020 (edited) 8 hours ago, bangank36 said: Could you try this on custom css #header, #header * { opacity: 1 !important; transition: none !important; } it indeed killed the animation in header, but it also killed the animation of header disappearing when you scroll down the page. Perhaps there is a way to distinguish between page load animation vs page use animation? Also the opacity line forced all dropdown folders to be shown regardless of hover. Edited November 11, 2020 by Kailron Beyondspace 1 Link to comment
Solution Beyondspace Posted November 11, 2020 Solution Share Posted November 11, 2020 I see, I just update to remove the fade effect only .tweak-fixed-header .header:not(.shrink), #header .preFade { opacity: 1 !important; transition: none !important; } Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
MarketingFurniture22 Posted July 9, 2022 Share Posted July 9, 2022 @revisor - would you mind sharing the solution? I see that it works on your page! I dislike that every time I click on a new page on the site I'm building the logo + headers also follow the animations. Link to comment
tuanphan Posted July 11, 2022 Share Posted July 11, 2022 On 7/10/2022 at 3:44 AM, MarketingFurniture22 said: @revisor - would you mind sharing the solution? I see that it works on your page! I dislike that every time I click on a new page on the site I'm building the logo + headers also follow the animations. Try adding to Design > Custom CSS /* Disable footer animation */ header#header * { transform: unset !important; opacity: 1 !important; transition-delay: unset !important; transition: unset !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AshM13 Posted July 13, 2022 Share Posted July 13, 2022 @tuanphan I tried adding the above code to my site, but it affected the mobile menu (went from two bars to 1 - see attached screenshot). Any suggestions? Site: https://www.amyvanharen.com/ Pw: amyvh13 Thank you! Link to comment
tuanphan Posted July 14, 2022 Share Posted July 14, 2022 10 hours ago, AshM13 said: @tuanphan I tried adding the above code to my site, but it affected the mobile menu (went from two bars to 1 - see attached screenshot). Any suggestions? Site: https://www.amyvanharen.com/ Pw: amyvh13 Thank you! Use this new code header#header *:not(.top-bun):not(.patty):not(.bottom-bun) { transform: unset !important; opacity: 1 !important; transition-delay: unset !important; transition: unset !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
studiolaurai Posted December 7, 2022 Share Posted December 7, 2022 Hi @tuanphan! I have a small question. I tried implementing the code you wrote above to remove fade from header, but it makes my Folder Navigation Drop down menu actually "drop-down" so it remains constantly "open". Is there a way to work around this issue? My website is https://www.lavilla.hr/ and password lavilla2023 Link to comment
tuanphan Posted December 10, 2022 Share Posted December 10, 2022 On 12/8/2022 at 12:27 AM, studiolaurai said: Hi @tuanphan! I have a small question. I tried implementing the code you wrote above to remove fade from header, but it makes my Folder Navigation Drop down menu actually "drop-down" so it remains constantly "open". Is there a way to work around this issue? My website is https://www.lavilla.hr/ and password lavilla2023 Use this code header#header *:not(.top-bun):not(.patty):not(.bottom-bun):not(span):not(.header-menu-controls-control):not(.header-menu-controls):not(.header-menu-nav-folder) { transform: unset !important; opacity: 1 !important; transition-delay: unset !important; transition: unset !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment