Announcement Bar Covers Quick Search

[martujv]

Hello!

My quick search is covered by the announcement bar (on mobile) and by the header's icons (on desktop).

 This is how it should look like, ideally:

- On mobile:

- On desktop:

❌ However, right now it looks like this:

- ❌ On mobile: 

- ❌ On desktop:

On mobile, the announcement bar covers the quick search and it looks bad. On desktop, the header icons cover the quick search and it looks bad too.

My theme is Stiletto and my website is https://qcvo6udrj7yhwl92-60150284501.shopifypreview.com

I would appreciate any solution! Thanks in advance!

[theycallmemakka]

Hi @martujv ,

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above tag </body>

<style>
.quick-search[aria-hidden="false"] {
    z-index: 9999999!important;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[martujv]

On mobile version, it doesn't appear right below the header and the header is in the background. Is there any way to make it like this:

It should be right below the header

[theycallmemakka]

Hi @martujv ,

Can you try replacing previous code with the bellow updated code.

<style>
.quick-search[aria-hidden="false"] {
    z-index: 9999999!important;
}
@media (max-width: 960px) {
   .quick-search[aria-hidden="false"] {
        --makka-announcement-height: 0px;
        --height-header: 60px;
        top: calc(var(--makka-announcement-height, 0) + var(--height-header, 0) - var(--scroll-y, 0));
    } 
}
</style>

[martujv]

Now it's better, but the header appears dark as if it's part of the background. Is it possible to remove this effect? And Thank you for your big help!

How it looks now with your code:

How it should look: 

[theycallmemakka · Accepted solution]

Hi @martujv ,

Can you try this updated code once? This should fix the issue.🤞

<style>
.shopify-section-group-header-group.announcement-bar__outer-wrapper {
    z-index: 0;
}
@media (max-width: 960px) {
   .quick-search[aria-hidden="false"] {
        --makka-announcement-height: 0px;
        --height-header: 60px;
        top: calc(var(--makka-announcement-height, 0) + var(--height-header, 0) - var(--scroll-y, 0));
    } 
}
@media (min-width: 960px) {
    .quick-search[aria-hidden="false"] {
        z-index: 9999999!important;
    }
}
</style>

[martujv]

Thank you very much! It's exactly like I wanted, and all the problems are fixed. Thank you again, really.