Jump to content

Lottie .json animation as header logo

Recommended Posts

  • Replies 13
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

You can add Lottie to Code Block in Site Footer, then we will give the code to move it into header & hide current gif header logo

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
  • 11 months later...
On 1/31/2023 at 10:39 PM, Tom_Motiio said:

Hi Tuan,

Would you be able to provide me with the code to move the header and hide the current gif header logo as well?  

Thanks,

Tom

What is your site url?

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
On 2/8/2023 at 2:51 PM, cade said:

Hey there 

I have the same issue for my website. do you have the solution?

Regards Claudio

You can add a Code Block on Footer > Add Lottie Json code > Then share site url, we can give code to replace Header Logo with Code Block

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
On 2/13/2023 at 3:49 PM, cade said:

Hey Tuanphan

Perfect. I added the code to the footer. It already works on this page:

https://the-rop.squarespace.com/datenschutz

Now I want to put it instead of the logo in the header as well...

Note: There will be changes in the animation - is it easy to replace it?

THX a lot and best regards

Claudio

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('div#block-yui_3_17_2_1_1675841487032_3184').appendTo('.header-title-logo a');
	});
</script>

image.thumb.png.1b63e683bc1e33befaa2b8d205ec6731.png

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

Hey Tuanphan

Just added de Code in the Footer section . Now I have this in the section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
        $('div#block-yui_3_17_2_1_1645746278761_3758').appendTo('.header-title-logo a');
    });
</script>
<style>
  .header-title-logo img {
    display: none;
}
</style>

<script>
  $(document).ready(function() { 
        $('div#block-yui_3_17_2_1_1675841487032_3184').appendTo('.header-title-logo a');
    });
</script>

Is it right like this?

 

Link to comment

Hey Tuanphan

Unfortunately it does not work yet.

I added de Code in the Footer section . Now I have this in the section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
        $('div#block-yui_3_17_2_1_1645746278761_3758').appendTo('.header-title-logo a');
    });
</script>
<style>
  .header-title-logo img {
    display: none;
}
</style>

<script>
  $(document).ready(function() { 
        $('div#block-yui_3_17_2_1_1675841487032_3184').appendTo('.header-title-logo a');
    });
</script>

Is it right like this?

 

Link to comment
On 2/20/2023 at 2:21 PM, cade said:

Hey Tuanphan

Unfortunately it does not work yet.

I added de Code in the Footer section . Now I have this in the section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
        $('div#block-yui_3_17_2_1_1645746278761_3758').appendTo('.header-title-logo a');
    });
</script>
<style>
  .header-title-logo img {
    display: none;
}
</style>

<script>
  $(document).ready(function() { 
        $('div#block-yui_3_17_2_1_1675841487032_3184').appendTo('.header-title-logo a');
    });
</script>

Is it right like this?

 

It looks fine to me. 

image.thumb.png.f5ccdd7ae10f782155847f80710f1791.png

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
On 3/3/2023 at 9:12 PM, cade said:

Hey Tuanphan

This is not my site. My site is: https://the-rop.squarespace.com/config/ PW:1234

THX a lot

Which page are you referring to? I don't see header logo on homepage

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

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.