Jump to content

Hiding Header in Search Bar

Recommended Posts

Posted

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. 

7CbPhPk.png

  • Replies 9
  • Views 1.2k
  • Created
  • Last Reply
Posted
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. 

7CbPhPk.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted

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>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted
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. 🙂

Posted

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

image.thumb.png.c2de9bf362a157ee9ffe7f561b817c5c.png

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();

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

  • 8 months later...
Posted

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!

 

 

Posted
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.