I can't able to remove the H1 inside the header of the Template. Using Bedford template from the 7.0 version

Hey Guys,

I need your help.

I can't able to remove the H1 inside the header of the Template.

Using Bedford template from the 7.0 version

Here's the in the backend

<header id="header" class="show-on-scroll" data-offset-el=".index-section" data-offset-behavior="bottom" role="banner">
    <div class="header-inner">
        <div id="logoWrapper" class="wrapper" data-content-field="site-title">
            <h1 id="logoImage">
                <a href="/"><img src="//images.squarespace-cdn.com/content/v1/592f9082b3db2b837ff5f801/1503122272278-NJTLW8C1P9XSXE01ZU0M/Asset+FA%26I.png?format=1500w" alt="Inspire Inside" /></a>
            </h1>
        </div>
    </div>
</header>
 

I want to remove this code "<h1 id="logoImage">".

This is the site: https://johnoxborough.com/

Do we have solution on this?

Thank you.

You can see solution in this thread, has same problem/same template

Thank you. The Code doesn't work.

ChatGPT Fixed enhanced the code

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(window).on('load', function() {
      const $h1 = $('#logoImage');
      if ($h1.length) {
          const $a = $h1.find('a');
          if ($a.length) {
              const $div = $('<div></div>').html($a.clone());
              $h1.replaceWith($div);
          }
      }
  });
</script>

<script>
  window.addEventListener('load', function() {
      console.log('Script loaded');
      const h1 = document.getElementById('logoImage');
      if (h1) {
          console.log('Found h1:', h1);
          const a = h1.querySelector('a');
          if (a) {
              console.log('Found a:', a);
              const div = document.createElement('div');
              div.innerHTML = a.outerHTML;
              h1.parentNode.replaceChild(div, h1);
              console.log('Replacement done');
          } else {
              console.log('a not found');
          }
      } else {
          console.log('h1 not found');
      }
  });
</script>

<style>
  div#logoWrapper img {
       max-width: 120px;
  }
</style>