Hiding Header in Search Bar

Hi,

I am trying to hide the header when users click to expand on the search bar. The site is bilingual. But the CSS that I have currently added only affects the index pages and perfectly hides the content on other pages but when users click on the search bar all the content from both languages appears and clutters it. Have been wracking my brain on figuring out how to do this for a while now. It would be much appreciated. I am using Rally (Brine template) as my default. 

5 hours ago, KhalilM said:

Hi,

I am trying to hide the header when users click to expand on the search bar. The site is bilingual. But the CSS that I have currently added only affects the index pages and perfectly hides the content on other pages but when users click on the search bar all the content from both languages appears and clutters it. Have been wracking my brain on figuring out how to do this for a while now. It would be much appreciated. I am using Rally (Brine template) as my default. 

We can help having a look if you can provide the url of the current site

9 hours ago, bangank36 said:

We can help having a look if you can provide the url of the current site

Hey, here's the URL to my site. Appreciate the help.

https://hexaflexagon-haddock-xb7g.squarespace.com/

password is 2142

Hi @KhalilM,

Please check if this snippet help, add it into advanced->Custom code injection, so far there is no indication class name in body that show a page is search page or not

<style>
  body:not(.not-search-page) .Header--top [data-nc-container="top-right"] {
    display: none !important;
  }
</style>
<script>
  Y.on('domready', function () {
    if (!Y.one(".sqs-search-page")) {
        Y.one("body").addClass("not-search-page");
        Y.one(".Header--top [data-nc-container='top-right']").show();
    }
 });
</script>

2 minutes ago, bangank36 said:

Hi @KhalilM,

Please check if this snippet help, add it into advanced->Custom code injection, so far there is no indication class name in body that show a page is search page or not

<style>
  body:not(.not-search-page) .Header--top [data-nc-container="top-right"] {
    display: none !important;
  }
</style>
<script>
  Y.on('domready', function () {
    if (!Y.one(".sqs-search-page")) {
        Y.one("body").addClass("not-search-page");
        Y.one(".Header--top [data-nc-container='top-right']").show();
    }
 });
</script>

 

That worked like a charm! Thanks a lot @bangank36! Would you mind explaining to me how your code achieved this? I would really like to learn what you did and how you found the right container. 

Thank you again! Really appreciate the help. 🙂

Well KhalilM

The <style> snippet will hide the search bar on EVERY Page except the search page, the hidden element is the right part of the nav bar as you can see here, notice that the class name for body .not-search-page is not default in squarespace, it's custom one

The <script> part take advantages of YUI library that simply does:

1. Wait for page ready

2. Search search input is on the page or not?

3. If there is search input, do nothing, as the nav is hidden already using style

4. If there is not a search input, add class name indicate that this page is normal page to the body element, the search bar will automatically show 

5. You can get rid of the last line, it's redundant

Y.one(".Header--top [data-nc-container='top-right']").show();

Thanks a lot for the explanation, @bangank36! Appreciate the help!

Hi @bangank36!

I used an adaptation of the code you shared in this thread to hide top and bottom footers on search page:

<style>
  body:not(.not-search-page) .Footer-blocks--bottom {
    display: none !important;
  }
</style>
<script>
  Y.on('domready', function () {
    if (!Y.one(".sqs-search-page")) {
        Y.one("body").addClass("not-search-page");
        Y.one(".Footer-blocks--bottom]").show();
    }
 });
</script>



<style>
  body:not(.not-search-page) .Footer-blocks--top {
    display: none !important;
  }
</style>
<script>
  Y.on('domready', function () {
    if (!Y.one(".sqs-search-page")) {
        Y.one("body").addClass("not-search-page");
        Y.one(".Footer-blocks--top]").show();
    }
 });
</script>

However, I can't hide the footers' color. Any idea on how I can do that?

My original question was this one.

Site: http://bookythings2.squarespace.com

password: booky

Thank you!

On 3/16/2021 at 4:55 PM, Begona said:

Hi @bangank36!

I used an adaptation of the code you shared in this thread to hide top and bottom footers on search page:

 

<style>
  body:not(.not-search-page) .Footer-blocks--bottom {
    display: none !important;
  }
</style>
<script>
  Y.on('domready', function () {
    if (!Y.one(".sqs-search-page")) {
        Y.one("body").addClass("not-search-page");
        Y.one(".Footer-blocks--bottom]").show();
    }
 });
</script>



<style>
  body:not(.not-search-page) .Footer-blocks--top {
    display: none !important;
  }
</style>
<script>
  Y.on('domready', function () {
    if (!Y.one(".sqs-search-page")) {
        Y.one("body").addClass("not-search-page");
        Y.one(".Footer-blocks--top]").show();
    }
 });
</script>

 

However, I can't hide the footers' color. Any idea on how I can do that?

My original question was this one.

 

Site: http://bookythings2.squarespace.com

password: booky

 

Thank you!

 

 

Do you still need help?

Yes, @tuanphan

I would appreciate any help!