Odd behaviour from header

[siriuswebdesign]

Hi

I’m working on my client’s site and most of the headers are functioning correctly. Recently, the client had an animated logo created, which uses a raw element linked to a JSON file. I updated the desktop header by replacing the old logo with this raw element and applied some header CSS. Everything works fine there, but since making this change, the mobile header has disappeared.

In the builder, the mobile header is still visible, but when viewing the site live, it no longer appears. I haven’t changed anything in the mobile header yet — I was about to add the raw element there as well, but noticed it had already disappeared.

The header I’m working with is “Header Home Anim”, which was duplicated from “Header Home” before I added the animation. Could you please advise on what might be causing the mobile header to disappear?

[tristup]

Hi Thomas,

Thanks for reaching out.

I’ve checked both the Header Home and Header Home Anim , but I couldn’t find any animated logo in either of them. Additionally, I can confirm that the Mobile header is appearing correctly in the Builder as expected.

If you’re still experiencing the issue, could you please share a screenshot or a short video highlighting the problem? That would help us better understand and resolve it more efficiently.

Thanks

[siriuswebdesign]

Ok I have done a short video, where do I post this

[siriuswebdesign]

I have already said that it can be seen in the builder, it’s when a page is viewed live. No changes have been made to Mobile header. I only made changes to the desktop. But when I have made the changes, the mobile header dissapears in the live view

[tristup]

Hi Thomas,

I forgot to add the frontend screenshot, where the Mobile Header is also visible. Also checked it in my Android mobile device, it is showing correctly, which might be due to the fact that the Anim Header is not assigned yet.

While checking the Anim Header, I found the DIV tag is not correctly closed, which might be the reason behind your problem, and also added the JavaScript code into the Header JS without the script tag, and checked if that works for you.

Hope it helps.
Thanks

[siriuswebdesign]

Thank you so much! You are life saver

[tristup]

Hi Thomas,

Glad that we are able to help you.

Thanks

[siriuswebdesign]

Hi Tristup.

Fantastic Job on making it work, thank you. So I copied the animated raw element into the mobile header. And that works like a treat. So I want it on the main header (Desktop) so I put it back in there and gave it a different ID, however. The animated logo dissapears from the desktop bar, but DOUBLES up on the mobile bar???!

[siriuswebdesign]

/* Lottie Logo Styling /
#lottie-logo {
width: 265px; / adjust for responsive */
max-width: 100%;
height: auto;
display: inline-block;
}

/* Lottie Logo Styling /
#lottie-logo-main {
width: 300px; / adjust for responsive */
max-width: 100%;
height: auto;
display: inline-block;
}

[ruenel]

Hello Thomas,

The Main header should have a different code bearing a unique ID like this example:

<a href="https://marketharboroughnails.co.uk" id="logo-link-main">
  <div id="lottie-logo-main"></div>
</a>

<script>
document.addEventListener('DOMContentLoaded', function() {
  lottie.loadAnimation({
    container: document.getElementById('lottie-logo-main'),
    renderer: 'svg',
    loop: false,
    autoplay: true,
    path: 'https://marketharboroughnails.co.uk/wp-content/uploads/2025/08/JSON-v4.json'
  });
});
</script>

Hope this makes sense.