Email Header form not working

[Huru]

On the staging site, I’m still working through the issues with the theme update and Cornerstone updates. I think we’re very close. Thanks for your insights.

Background:
Staging site has X-Theme 6.0.4 and Cornerstone 3.0.1
Example page: https://huru.staging.wpengine.com/impact/

The issue I’m having is there is an email newsletter signup at the top of each page. From what I can tell, it uses the X email forms plugin with Mailchimp. I have verified the MailChimp info matches the production site. The API looks fine and I can see the mail lists.

Instead of invoking the form, I get a menu page such as “News”. It seems as if there are some anchors that overlay the form that take precedence, but I’m seeing the same thing on production. The difference is production does invoke the form.

I tried going into Cornerstone and looking for a section that contains the header, but I don’t see one. I do see this page is using a template with a header no footer. But those names don’t map to what I see in “Template Manager”.

Any idea what’s causing this effect and where to look? I tried seeing if there were similar problems in the forum, but didn’t find anything.

I’ll also send you credentials to staging so you can take a look.

Thanks in advance,
Anne

[Prasant]

Hello @Huru,

Thanks for asking.

I can confirm that the subscribe form is getting kind of overlaid by the navigation menus. To fix the problem, you can add following CSS under X > Theme Options > CSS:

#x-section-1 {
    z-index: 999999;
}
.x-navbar-wrap {
    z-index: 10;
}

I also suggest you to add a custom class to the section-1 element, that way you can be sure it won’t create unnecessary conflicts. If you want to add a custom CSS class that you can replace the above code with following:

#subscribe-form-header {
    z-index: 999999;
}
.x-navbar-wrap {
    z-index: 10;
}

Please replace subscribe-form-header with you class name.

I used Google Chrome Dev tools to find out the correct selector. If you would like to get started with Chrome dev tools, please take a look at following resources:

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Please note that in above codes I used z-index property. Z-index is a CSS property that specifies the order in which elements are stacked. To learn more about z-index, please take a look at following tutorial.

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

If you would like to learn CSS, please watch following YouTube video.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Thanks.