remove animation from the header

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?

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;
}

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.

@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. 

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;
}

@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!

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;
}

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

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;
}

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?

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

@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