stop header transition when loading

- 10 years, 1 month ago joshkallmeyer
  Participant
  
  Expired
  
  hey guys,
  
  so I have a header image – and I want to remove the transition it does when the website loads. after about 2 seconds, the image loads, pushing the content down.
  
  the website is https://drsamberne.com
  
  can you help here?
  
  thanks!
- 10 years, 1 month ago joshkallmeyer
  Participant
  
  Expired
  
  hello?
- 10 years, 1 month ago Ruco
  Keymaster
  Hello,
  
  Please edit the file main.js.
  Find the lines (line 204):
  
  if(self.length == 0) return false; var height = self.height(); self.height(0); setTimeout(function(){ self.animate({ opacity: 1, height: height+'px' }, 800); }, 600);
  
  and delete them.
  
  Best regards!
- 10 years, 1 month ago joshkallmeyer
  Participant
  
  Expired
  
  So I’ve done that – but the image header won’t load now? It doesn’t have that transition, but the image doesn’t display. I’ve even changed images.
  
  I’ve put the original main.js back up now, but can you please tell me how to make the transition go away successfully?
- 10 years, 1 month ago Mirela
  Participant
  
  Hello,
  
  Please in the code presented above, edit the value 800 to 0. Save file and refresh.
  
  Best regards!
- 10 years ago joshkallmeyer
  Participant
  
  Expired
  
  It’s almost gone! Is there a way I can fully stop it?
- 10 years ago Mirela
  Participant
  
  Hello,
  
  By setting it to 0, it is already fully stopped. What you can not stop, is the page loading the elements in different speed as the text takes much less time to load than the image.
  
  Best regards!
- 9 years, 3 months ago gtrenard
  Participant
  
  Expired
  
  Is this change still applicable? I tried to change the code in my site on the file /wp-content/themes/tower/js/main.js but the header still loads with animation.
- 9 years, 3 months ago Mirela
  Participant
  
  Hello,
  
  @gtrenard,
  This is a solution customized for Specular theme files. Please write at your theme’s specific forum.
  
  Best regards!
- 5 years, 9 months ago Mirela
  Participant
  Note:
  
  Remove animation using custom css. Add this css into your Custom Css box:
  
  .header_page.with_subtitle .titles { opacity: 1 !important; padding-top: 0px !important; }
  
  Regards!