Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hiding Header in Search Bar


KhalilM
Go to solution Solved by bangank36,

Question

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

Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 <sty

Yes, @tuanphan I would appreciate any help!

Posted Images

9 answers to this question

Recommended Posts

  • 0

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>

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Animated Heading Block
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Animated Heading Block
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
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. 🙂

Link to post
  • 0

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Animated Heading Block
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

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!

 

 

Link to post
  • 0
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?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...