Jump to content

Hiding Header in Search Bar

Go to solution Solved by Beyondspace,

Recommended Posts

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 comment
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)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution

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)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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 comment

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)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 8 months later...

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

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