Hide header when searching Dawn 15.0.0

[SHBQA]

Hi,

As the search bar and the header overlap when searching, i want to hide the header when the search bar is opened. I have tried doing that using javascript but I cant seem to get it to work. Can someone help me get this done?

document.addEventListener('DOMContentLoaded', function () {
  const header = document.querySelector('header');
  const searchModal = document.querySelector('details-modal.header__search details');

  if (searchModal && header) {
    searchModal.addEventListener('toggle', function () {
      if (searchModal.hasAttribute('open')) {
        header.style.display = 'none';
      } else {
        header.style.display = '';
      }
    });
  }
});

I tried this code but both the header and the search bar are disappearing when the search icon is clicked.

URL: shbqa.com

[Guleria]

Hello @SHBQA ,

You can’t do it with JavaScript because search html is also part of the header. If you hide the header on click of the search icon search popup will also be hidden.

I suggest try with css so it looks like the header is hidden behind the search.

Thanks

[Entesta]

Hi @SHBQA

You can try adding the following CSS instead. It will make the search take full width and fix the placement.

@media screen and (max-width: 750px) {
  .search-modal {
    width: 100%;
    margin: 0 auto;
  }
}

Thanks