Jump to content

remove animation from the header

Go to solution Solved by Beyondspace,

Recommended Posts

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 plugin
If 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
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 by Kailron
Link to comment
  • Solution

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 plugin
If 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
  • 1 year later...
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
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!

image.thumb.jpeg.0f00d397ca0f5a56f15dce900fdde996.jpeg

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
  • 4 months later...
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
  • 2 months later...
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
  • 3 months later...

@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

Edited by revisor
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.