Customizr sticky header hidden behind Mailchimp Top Bar

Hi,

I am using the Mailchimp Top Bar plugin with the Customizr theme. Both the theme header and the Top Bar have fixed positioning (when choosing to have a sticky header). The z-index of the Top Bar is higher, so it covers the menu. Here is the website:

Oakhall church website

To investigate, I created a child theme and managed to get the top bar plugin to push the page content down (as intended) by changing the following CSS:

.tc-sticky-header .tc-header {
    position: static;
}

However, I would like the sticky header to become fixed to the top when scrolling down the page, like this example:

Codepen example

I’m not sure the best way to do this…

The theme already has sticky header functionality. Is there a simple fix I can do in one of the existing php or js files? Do I need to included a another script to fix it?

Thanks,

Andy