Docs

[bradkerin]

Hi there,

I want to add a mailchimp standard horizontal form to my topbar – I have tried adding the following code (from mailchimp) to the topbar CSS and it shows up, but it makes the whole topbar twice the height and moves everything else around.

I know you don’t work with external programs/plugins etc, but are you able to advise at all how I might adjust the topbar so it looks the same as before (but with the signup form?). It would be great to have the signup form in the middle of the topbar, with the other content to the right as it currently is.

Thanks!

[bradkerin]

This reply has been marked as private.

[Lely]

Hi There,

Please add the following code on your child theme’s functions.php file:

function mail_chimp_stylesheet() { ?>

 <!– Begin MailChimp Signup Form –>
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>

<?php }

add_action( 'wp_head', 'mail_chimp_stylesheet' );	

Then update your Topbar Content in the Customizer to the following:

<div class="topbar-link"><a href="http://carbonmarketinstitute.org/home/about-us/">About Us</a> | <a href="http://carbonmarketinstitute.org/home/contact/">Contact Us</a></div>
<div id="mc_embed_signup">
<form action="//carbonmarketinstitute.us12.list-manage.com/subscribe/post?u=0e02fab4f148cff62e8a51899&id=280404bdc2" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0e02fab4f148cff62e8a51899_280404bdc2" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>

Also replace this custom CSS:

.x-topbar .p-info {
    float: right;
    margin-bottom: 5px;
}

With this:

.topbar-link {
    display: inline-block;
    float: right;
    margin-top: 5px;
}

Hope this helps.

[bradkerin]

Thank you so much – that is great. I just have three more queries.

1. Is it possible to get the social media share buttons back up next to the About Us/Contact Us links as they were originally?

2. There is also a large gap under the “Subscribe to our mailing list” form. How do I get rid of that?

3. It would also be great to get the About Us/Contact Us links in line with the form, instead of slightly higher. Any ideas?

Thank you so much for your help. You support is absolutely amazing 🙂

[Lely]

Hi There,

#1 & #2 Please update this:

.x-topbar .x-social-global {
    position: relative;
    right: 10px;
}

To this:

.x-topbar .x-social-global {
    position: relative;
    right: 10px;
    margin-top: -45px; /*Adjust this accordingly*/
}

#3
Please also update this:

.topbar-link {
    display: inline-block;
    float: right;
    margin-top: 5px;
}

To this:

.topbar-link {
    display: inline-block;
    float: right;
    margin-top: 17px;
}

Please do apply both CSS update above before checking the page again.

Hope this helps.

[bradkerin]

Oh fantastic that worked perfectly – thanks so much for helping me with that! Topbars always confuses me!

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts