Adding Linked Phone Number w/ Icon in Top Bar

Support
#1

Hello,

I’m trying to replicate the top bar of this site (https://www.mauiplumbinginc.com/our-services-wailuku-hi/) which has a phone icon next to a phone number link above the top menu.

I know I need to add code to the Topbar Content section and possibly the custom CSS/Javascript section. But beyond that I’m stumped. Can you point me in the right direction?

#2

Hello @millerwilliams,

Thanks for asking. :slight_smile:

You can add following code under X > Launch > Options > Header > Miscellaneous > Topbar content:

<a href="tel:+4377482217"><i class="x-icon x-icon-phone" data-x-icon=""></i> 07748-2217</a>

Thanks.

#3

Thank you! Now how would I align it with the rightmost part of the menu, change the font color, and make the font & icon size larger?

#4

I promise to learn more HTML/CSS soon :sweat_smile:

#5

Hello @millerwilliams,

You can add following CSS to make required changes:

p.p-info {float: right !important;}

.p-info a {color: #ddd !important; font-size: 18px;}

You can refer following resources to learn more about CSS and the changes you are looking for:

https://www.w3schools.com/css/
https://www.w3schools.com/css/css_float.asp
https://www.w3schools.com/cssref/pr_text_color.asp
https://www.w3schools.com/cssref/pr_font_font-size.asp

Thanks.

1 Like
#6

This was very helpful, can you please provide the code for adding on the same line in the same format a email icon with email address?

Checkout my topbar: perfecttoolrental.com

Thanks!

#7

Hi there,

You can add it like this,

<a href="mailto:[email protected]"><i class="x-icon x-icon-envelop" data-x-icon="&#xf0e0;"></i> [email protected]</a>

That should do it, cheers!