Aligning top bar elements

[taylorbw334]

I’ve added a custom button to the top bar with the following css.

I need to add a phone number and email address that aligns to the left side of the top bar. Currently the text is aligning to the button position. Site link below. I also want to make sure this works on mobile.

CSS
.x-topbar .p-info{
float: right;
margin: 0px 0px 0px 0px;
}
.x-topbar .x-social-global {
margin-top: 0px;

}

.x-btn.x-btn-mini.top-button {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 20px;
float: right;
color: white;
border-color: #E65C60;
background-color: #E65C60;
-webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.x-btn.x-btn-mini.top-button:hover {
margin-left: 20px;
color: white;
border-color: #ecab3b;
background-color: #ecab3b;
-webkit-box-shadow: 0 0.25em 0 0 #986610, 0 4px 9px rgba(0, 0, 0, 0.75);
box-shadow: 0 0.25em 0 0 #986610, 0 4px 9px rgba(0, 0, 0, 0.75);
}

@media (max-width: 1200px){
.x-topbar .p-info {
margin: 1px 0px 0px 0px;
}
}

@media (max-width: 1200px){
.x-topbar .x-social-global {
margin: 1px 0px 0px 0px;

}
}

Top Bar Content

<a href=“http://votedang.com/donate”

class=“x-btn x-btn-mini top-button”> Purchase Package

http://nolacuba.benwoodsdesign.com

[friech]

Hi @taylorbw334,

Thank you for writing in, please update your Topbar Content to this:

<span class="my-links">
	<a href="tel:00000">000000</a> | <a href="mailto:[email protected]">[email protected]</a>
</span>
<span class="my-button">
	<a href="http://votedang.com/donate" class="x-btn x-btn-mini top-button">Purchase Package</a>
</span>

Replace the email and contact number values with your own.

Then add this to Theme Options > CSS

.x-topbar .p-info {
	width: 100%;
}

@media (max-width: 480px) {
	.my-links,
	.x-btn.x-btn-mini.top-button {
		float: none;
		margin: 12px;
	}
}

Then save and clear your cache (if any)

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[taylorbw334]

Thank you.

Is there a way to hide the phone number and email on mobile?

Also, how do I adjust the email / phone vertical height?

[ruenel]

Hey @taylorbw334,

To hide the phone and email on mobile, you will have to remove this code first:

@media (max-width: 480px) {
	.my-links,
	.x-btn.x-btn-mini.top-button {
		float: none;
		margin: 12px;
	}
}

And then replace it with this code instead:

@media (max-width: 767px) {
	.my-links,
	.x-btn.x-btn-mini.top-button {
		display: none;
	}
}

And to adjust the email/phone vertically, you will need this code:

span.my-links{
    margin-top: 10px !important;
    display: inline-block;
}

We would love to know if this has worked for you. Thank you.

[taylorbw334]

Alignment works perfectly. I’ve tried inserting phone and envelope icons in front of the numbers, but am not having any luck with tags. What format do I use in the top bar content?

[friech]

Hi @taylorbw334,

You can use the follow fontawesome code.

Envelop icon

 <i class="x-icon-envelop" data-x-icon-s="&#xf0e0;" ></i>

Phone icon

<i class="x-icon-phone" data-x-icon-s="&#xf095;" ></i>

You can read the explanation here.

Hope it helps,
Cheers!