Header appears above Mobile Information Bar Business Hours Screen Overlay

Site URL: https://www.purnamayurveda.com

Hi, 

I used the following code from ghostplugins to move the mobile information bar behind the mobile menu overlay. 

// Push Mobile Info Bar Behind Mobile Menu //

.sqs-mobile-info-bar {
  z-index: 4 !important;
}

This works fine except on the header appears over the the business hours screen overlay. My header is transparent so it looks awkward.  See screenshot. 

Any recommendations? I would like the mobile info bar to be behind the mobile menu but I dont want the header to appear on the business hours overlay screen. 

Thanks

Akanksha 

How can I access the page like the image posted?

This is the current one on my device

23 minutes ago, bangank36 said:

How can I access the page like the image posted?

This is the current one on my device

@bangank36 Please could you try again, it will show now when you click on 'Hours'.  

15 minutes ago, AkankshaK said:

@bangank36 Please could you try again, it will show now when you click on 'Hours'.  

Is it the result you want to achieve?

2 minutes ago, bangank36 said:

Is it the result you want to achieve?

Yesssss Please 🙂

Just now, AkankshaK said:

Yesssss 🙂

Just now, AkankshaK said:

Yesssss 🙂

You can try adding to Home > Design > Custom Css

.sqs-mobile-info-bar-show-overlay ~ #siteWrapper #header  {
  display: none;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Yayy thank you, that worked brilliantly.  Thanks so much, you are a real star 😄