Inserting Linked Text before Social Icons in Topbar

Support
#1

Hello. I’m working on https://5zv.005.myftpupload.com/ and am trying to add an email icon, clickable email address, phone icon and clickable phone number in line with but prior to the social icons in the topbar. I’d like it to look like this:

image

I added the following CSS based on another thread:

.x-topbar .x-social-global {
    float: right;
    clear: both;
    position: relative;
}
.x-topbar .p-info {
    font-size: 14px;
    letter-spacing: 0.3px;
    margin: 0px 0 0;
    margin-right: 0px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Cabin',sans-serif;
    float: right;
    margin-right: 135px;
}

This is the text I tried in the topbar:

<div align="right"><img class="alignnone size-full wp-image-38" src="http://5zv.005.myftpupload.com/wp-content/uploads/2021/10/Info-Icon-1.jpg" alt="" width="23" height="23" /><a href="mailto:info@scheynostlaw.com>info@scheynostlaw.com</a><img class="alignnone size-full wp-image-37" src="http://5zv.005.myftpupload.com/wp-content/uploads/2021/10/Phone-Icon.jpg" alt="" width="23" height="23" /><a href="tel:+15029375287>(502) 937-5287</a></div>

Obviously isn’t working. help please with thanks,

Neil

#2

It obviously removed some of the code I tried in the topbar, but I hope you get the idea

#3

Hello Neil,

Thanks for writing in!

Please be advised that the Topbar Content is wrapped with a <p> HTML tag. You cannot use <div> tag in your code. You can only use <span>:

<span align="right">
	<img class="alignnone size-full wp-image-38" src="http://5zv.005.myftpupload.com/wp-content/uploads/2021/10/Info-Icon-1.jpg" alt="" width="23" height="23" />
	<a href="mailto:info@scheynostlaw.com">info@scheynostlaw.com</a>
	<img class="alignnone size-full wp-image-37" src="http://5zv.005.myftpupload.com/wp-content/uploads/2021/10/Phone-Icon.jpg" alt="" width="23" height="23" />
	<a href="tel:+15029375287">(502) 937-5287</a>
</span>

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Best Regards.

#4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.