[ZaepianParticipant]

Hello!

I know this topic has been covered several times before, but each post I read seemed to be site specific.
I want to add an email subscription form in my topbar in two parts.
My goal is to put a title in the first line, and underneath that, in line two, have an email input field and a subscription button in-line with each other.
I’ve created a simple form, but am not sure how to put it in the topbar, as shortcodes don’t work in the input field in the customizer.
If you’ll please walk me through the process, I’ll be quite grateful.
Thank you!

[ZaepianParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Thanks for writing in!

To add email subscription form in your topbar, kindly do the following.

1. Enable shortcode in your topbar by adding this in your child theme’s functions.php file.

/* Enable shortcode in topbar */
add_filter('x_option_x_topbar_content', 'do_shortcode');

Please add it after this line

// Additional Functions
// =============================================================================

2. Add your email subscription shortcode in your topbar content under Header > Miscellaneous > Topbar Content in the customizer

[x_subscribe form="286"]

http://screencast.com/t/Mr5GzffWGqnc

3. To make form display inline, add this in your custom > css box in the customizer.

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

.x-topbar .x-subscribe-form fieldset {
     display: inline-block;
     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;
}

Hope that helps.

[ZaepianParticipant]

This is awesome. It allows shortcodes to be added to my topbar and that’s where I want my email form.
However, it’s not the rightsize or in the right position at all.

This is what I’m trying to achieve:

View post on imgur.com

As you can see in the image, I’m trying to do three things;
1. Float the entire form right.
2. Make the entire form smaller.
3. Make the email field longer, so the form is justified.

Can you help me figure out how to do this?
Thanks so much!

[FriechModerator]

Hi There,

You can add this under Custom > CSS in the Customizer.

/*float the form to right*/
.x-topbar #x-section-2 {
	float: right;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 13px;
}

/*text size adjustment*/
.x-topbar .x-subscribe-form {
	font-size: .8em !important;
}

/*Email field adjustment*/
.x-topbar .x-subscribe-form fieldset:first-of-type {width: 80%;}

Hope it helps, Cheers!

[ZaepianParticipant]

That’s perfect!
One thing I forgot about though, was the fact that I hadn’t yet added the social media icons to the top bar.
And, now that I have, they run into the email form.
What do I have to target to add some padding to the right side of the social media icons?
Also, since we’re on the subject, how can I target the icons individually to change their colors?
I think I might like to make each of the icons their official brand colors.

Thank you very much for all the help today!

[JadeModerator]

Hi there,

Please add this CSS in the Customizer:

.x-topbar .x-social-global {
    margin-right: 15px;
}

i.x-icon-facebook-square {
    color: blue;
}

i.x-icon-instagram {
    color: black;
}

i.x-icon-pinterest-square {
    color: red;
}

Kindly change the color values of the social icons to the appropriate colors.

Thank you.

[ZaepianParticipant]

Awesome, that worked!

Just one last question regarding the social icons; how can I get them to align left underneath my website email address?

I’m trying to do this:

View post on imgur.com

I also want to insert an image in the topbar and have it spaced equally between my website email address on the left, and the email form on the right as seen in the image above.

Can you tell me how to achieve this layout?

Thanks a million!

[ZaepianParticipant]

Ok, it actually looks a little different than that image I provided because I already added the image to the top bar.
So, you’ll see that;
-the website email needs to move back up a little bit
-the social icons need to move left and under the email
-the IMG needs to move up a touch
-i may need to control the left and right margins of the IMG

Thank you!

[ChristopherModerator]

Hi there,

Please update your code to :

<div class="x-section man pan">
<div class="x-column x-ms x-1-5"><span clear: left; style="color:#000">Email: <a href="mailto:info@bailiwickers.com">info@bailiwickers.com</a></span>
<div class="my-class x-social-global"><a href="#" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon=""></i></a><a href="#" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon=""></i></a><a href="#" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon=""></i></a></div></div>
<div class="x-column x-ms x-2-5"><img src="http://bailiwickers.com/wp-content/uploads/2016/01/CustomOrders.jpg"></div>
<div class="x-column x-ms x-2-5">[x_subscribe form="286"]</div>
</div>

Add this CSS :

.x-topbar .x-social-global{
display:none;
}
.x-topbar .my-class.x-social-global{
display:block;
float:left;
}
.x-topbar p:empty {
    display: none;
}

Hope that helps.

[ZaepianParticipant]

Thank you for that, but it doesn’t work for me.
I mean, it achieves the look I was going for on desktop.
But, it completely breaks the mobile layout.
See:

View post on imgur.com

I really liked how things were looking on mobile before and would like to keep them that way after the changes are made to the the desktop layout.

[ChristopherModerator]

Hi there,

Please update it to :

<div class="x-section man pan">
<div class="x-column x-sm x-1-5"><span clear: left; style="color:#000">Email: <a href="mailto:info@bailiwickers.com">info@bailiwickers.com</a></span>
<div class="my-class x-social-global"><a href="#" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon=""></i></a><a href="#" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon=""></i></a><a href="#" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon=""></i></a></div></div>
<div class="x-column x-sm x-2-5"><img src="http://bailiwickers.com/wp-content/uploads/2016/01/CustomOrders.jpg"></div>
<div class="x-column x-sm x-2-5">[x_subscribe form="286"]</div>
</div>

Hope it helps.

[cwlucasParticipant]

Hi There – this looks like the thread I’ve been looking for for almost a month! Thanks for this great info.

I’ve installed the code in my child theme’s functions.php file, but when I add the shortcode into the misc section of the topbar content, nothing happens. site: leahcullis.com

Happy to provide login as needed. Thank you!

[NicoModerator]

Hi There,

Thanks for writing in.

Would you mind opening a new thread then share us your admin credentials and FTP so we could check your setup closer.

Don’t forget to set it as private reply.

Thanks.

[Author]

Posts