Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

stop header transition when loading

headerresponsivetransition
    • 10 years 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 ago joshkallmeyer
      Participant

      Expired

      hello?

    • 10 years 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 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 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!

Viewing 9 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password