Issues With MailChimp PopUp with Supply Theme

Cass_Caldwell
New Member
3 0 0

Hi,

I am running the Supply theme.  I have created a newsletter pop up form with MailChimp.  When I paste the code given by MailChimp into my theme.liquied the popup works fine on a PC.  The problem is when viewed on a phone, a portion of the popup resides behind my navigation bar.  Specifically, the Close button, so the only way that customers could close the popup would be to subscribe.  So, I have removed the code for now.

Is there somewhere I could place the code that would maybe move the popup down the page, so that the Close button doesn't hide behind the navigation bar? Or even have it pop up on top of the bar?

Here is the code they gave me:

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us13.list-manage.com","uuid":"13cdc263354e0380306e2104a","lid":"348edfd538"}) })</script>

Any help would be greatly appreciated.

Thanks!

 

 

 

 

 

 

 

Replies 5 (5)
Cass_Caldwell
New Member
3 0 0
Calvin_Yu1
New Member
1 0 0

I just ran into the same problem and the issue lies in the z-index property of the mobile nav bar.  To fix the problem will require you to make a few simple edits in the underlying timber.scss.liquid and ajaxify.scss.liquid

/Assets/timber.scss.liquid

  1. search for "z-index: 999999999" under the /*======= Medium-down mobile nav bar ========*/ section
  2. change the z-index value from 999999999 to 1001
  3. save the file

//Assets/ajaxify.scss.liquid

  1. search for z-index: 99999999 under the /*========= Ajaxify Modal ==========*/ section
  2. change the z-index value from 99999999 to 1000
  3. save the file

The MailChimp popup modal has a z-index of 1002 and thus by setting the above to 1001 and 1000 the MailChimp popup will overlay the floating mobile navigation bar.  I also set the Opacity to 80 in the MailChimp popup form settings so the "Close" on the popup form is easily visible.

 

Chris36
Tourist
3 0 2

I can't seem to get this working on my site www.lovecubby.com because the instructions seem to no be longer applicable, as timber and ajaxify are no longer files in the supply theme.  Does anyone have an update for this?

katie_leary_seb
Tourist
8 0 7

I applied the same fixes recommended above but in the file ... 

theme.scss.liquid

and it worked!