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, Lightbox Studio pluginIf 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, Lightbox Studio pluginIf 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
adameus Posted February 24 Share Posted February 24 hey geniuses! i cannot find any way to remove the header animation without it making the drop down menu show. all the code above results in this. any ideas? Link to comment
tuanphan Posted February 27 Share Posted February 27 On 2/25/2023 at 12:54 AM, adameus said: hey geniuses! i cannot find any way to remove the header animation without it making the drop down menu show. all the code above results in this. any ideas? What is your site url? We can check/tweak the code easier 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
revisor Posted yesterday at 03:46 AM Author Share Posted yesterday at 03:46 AM (edited) @tuanphan hi, this code worked well for gallerymilmar.com //remove header load animation .tweak-fixed-header .header:not(.shrink), #header .preFade { opacity: 1 !important; transition: none !important; } however, sometimes there is this weird bug where when you click a navigation link the whole menu shifts a big. I can't quite pinpoint the problem. As of right now, it sometimes happens and sometimes doesn't on firefox and safari. If you can reproduce the problem, a fix would be greatly appreciated Screen Recording 2023-06-03 at 8.42.44 PM.mov Edited 2 hours ago by revisor 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