Customising the top bar

Support
#1

Hello,
I would like to add a tel & email icon to the top barleft hand corbner in the non-pro version of xtheme.
What is the best way to achive this?
Tahnk you in advance.
Regards, J.

#2

Hi There,

Thanks for writing in! You can enable Topbar under Appearance -> Customize -> Header and you can add HTML into your Topbar content area.

For example:

<span> <a href="tel:+13174562564">317-456-2564</a> | <a href="mailto:[email protected]">[email protected]</a></span>

Hope that helps.

#3

Thanks for the quick reply - I am actually wanting to put an tel & email ICONS rather than the number and email address. I assume this can be done by addiny to the same area in the Appearance -> Customize -> Header.
Is there a way to dispaly the number when the icon is hovered over?
Thanks.

#4

Hello @Justin_Kinsella,

You can do this by adding the following CSS below into your Appearance > Customize > Additional CSS:

.tooltip {
    position: relative;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

And put the following HTML into your Appearance > Customize > Header > Topbar Content area:

<div class="tooltip">ICON HERE<span class="tooltiptext">NUMBER HERE</span></div> | <a href="mailto:[email protected]">mailto:[email protected]</a></span>

Please change ICON HERE to your desired icon markup (HTML code) and the NUMBER HERE to the number you want.

Hope it helps.

#5

Hello,

Unfortunatley this has not worked for me.

The desired look I am trying to get with theses icons in the top bar is like the attached screen shot and when the user hovers over the icon the actual number shows…

Many thanks

#6

Hi There,

Try using a code like this instead.

<a href="tel:#link"><i class='x-icon x-icon-phone' data-x-icon=''></i> </a> | <a href="mailto:[email protected]"><i class='x-icon x-icon-envelope' data-x-icon=''></i> </a>

Hope that helps.

#7

Yes that worked -

Thank you very much.

#8

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#9

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