Hello, GTP,
Thank you for your response, but we asked you about URL of your site.
In this case, we can provide you with an example, but further customization should be done by you for your site.
Result – https://gyazo.com/da6e5f9935f61fed7450126d5d842ee9 , code snippet added in child-theme/functions.php:
add_action('wp_head', function() { ?>
<style type="text/css">
.header-wrapper .et_column {
opacity: 0;
transform: translateY(30px)
}
.et-preloader-hide .header-wrapper .et_column {
animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .2s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .2s forwards;
}
.et-preloader-hide .header-wrapper .et_column:nth-child(2) {
animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .4s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .3s forwards
}
.et-preloader-hide .header-wrapper .et_column:nth-child(3) {
animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .5s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .4s forwards
}
.et-preloader-hide .header-wrapper .et_column:nth-child(4) {
animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .6s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .5s forwards
}
@keyframes et_header_fade_up {
0% {
transform: translateY(30px)
}
to {
transform: translateY(0)
}
}
@keyframes et_header_fade {
0% {
opacity: 0
}
to {
opacity: 1
}
}
</style>
<?php });
For https://xstore.8theme.com/elementor2/industrial-power-tools/ , the next code can be used:
add_action('wp_head', function() { ?>
<style type="text/css">
.header-wrapper .et_element-top-level {
opacity: 0;
transform: translateY(30px)
}
.et-preloader-hide .header-wrapper .et_b_header-logo.et_element-top-level {
animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .2s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .2s forwards;
}
.et-preloader-hide .header-wrapper .header-secondary-menu.et_element-top-level {
animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .4s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .3s forwards
}
.et-preloader-hide .header-wrapper .et_b_header-search.et_element-top-level {
animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .5s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .4s forwards
}
.et-preloader-hide .header-wrapper .header-html_block4 {
animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .6s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .5s forwards
}
.et-preloader-hide .header-wrapper .header-main-menu2.et_element-top-level {
animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .7s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .6s forwards
}
.et-preloader-hide .header-wrapper .et_b-header-account.et_element-top-level {
animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .8s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .7s forwards
}
.et-preloader-hide .header-wrapper .et_b-header-cart.et_element-top-level {
animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .9s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .8s forwards
}
@keyframes et_header_fade_up {
0% {
transform: translateY(30px)
}
to {
transform: translateY(0)
}
}
@keyframes et_header_fade {
0% {
opacity: 0
}
to {
opacity: 1
}
}
</style>
<?php });
Kind Regards,
8theme team