Docs

[Kim g]

Hello- I followed this great thread here and got really far in adding the mailchimp form in the topbar:
https://community.theme.co/forums/topic/create-mailchimp-email-form-that-is-inline-and-place-in-topbar/

I nnow would like to reduce the size of the subscribe button and lesson the padding around it so that there is less vertical width to the top bar. You can see it at the top of the site here:

Home

I look forward to your response.
Kim

[Joao]

Hi Kim,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-topbar {
    max-height: 50px;
}

.x-topbar .x-social-global {

    margin-top: -6px;
}

.x-topbar .x-subscribe-form {
    margin-top: -10px !important;
}

.x-subscribe-form input[type="submit"] {
    padding-left: 2px;
    padding-right: 2px;
}

Hope that helps

Joao

[Kim g]

That is great on desktop, thank you!

On mobile, I have this weird white box appearing:
http://devv.rayrolando.com/wp-content/uploads/2016/11/FullSizeRender.jpg

This predated your above styling, I believe it happened from this CSS:

/*newsletter sign up in top bar*/

.x-topbar .x-subscribe-form {
max-width:none !important;
}

.x-topbar .x-subscribe-form fieldset {
display: inline-block !important;
vertical-align: middle;
}

.x-topbar .x-subscribe-form input[type=”submit”] {
margin:0;
}

.x-topbar .x-subscribe-form input[type=”text”],
.x-topbar .x-subscribe-form input[type=”email”] {
margin-bottom: 0;
}
/*float the form to right*/
.x-topbar #x-section-2 {
float: right;
padding-top: 0;
padding-bottom: 0;
margin-top: 20px;
}

Thanks again

[Rupok]

Hi there,

Let’s add this CSS as well :

.x-topbar .p-info {
  display: none;
}

Cheers!

[Kim g]

Thank you!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts