Docs

[kbosland]

Hi, I am interested in getting the phone and email in the logo/ header area and clickable. Is this possible? I did figure out how to get it in the mobile menu only, but my customer wants it to look like the screen shot.

Thanks!
Kathy

[Rupok]

Hi Kathy,

Thanks for writing in! You can just wrap the text within anchor link :

<div class="top-links top-co-inf rgtflot">	
	<h6> <a href="mailto:health@putneychiropractic.co.uk"><i class="icomoon-envelop-2"></i> health@putneychiropractic.co.uk</a></h6>
 	<h6><a href="tel:020 8785 6144"><i class="icomoon-phone-2"></i> 020 8785 6144</a></h6>
</div>

Cheers!

[kbosland]

Sorry for the dumb question, where would I put that? Menu, header?

[Jade]

Hi Kathy,

Would you mind providing the link to your actual site so that we can check it?

Thank you.

[kbosland]

http://livefree.staging2.bosland.com/

[Joao]

Hi There.

Go to Appereance > Customizer > Header > Turn On Tobar Content > Insert in topbar content.

Hope it helps

Cheers

[kbosland]

Thanks, I would want it not to show on desktop, only smaller screens. I would want it centered and not to show the social media icons. Can you advise?

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media(min-width: 767px) {
.x-topbar {
display: none;
}
}
.x-topbar .x-social-global {
display: none;
}
.x-topbar .p-info {
  float: none;
}

.x-topbar {
text-align: center;
}

Hope it helps

Joao

[kbosland]

Fantastic thank you so much. The original code above has icomoon-envelop-2 and the little phone too, these are not coming through. Do you know why that might be?

thanks!

[kbosland]

I also want to change the font color,

Here is the code where I added the font color, but it doesn’t seem to work. In summary, I am looking for a brown font and icon phone and email to be in front of the email and phone.

<div class=”top-links top-co-inf rgtflot”>
<h5> <font color=”brown”> <i class=”icomoon-envelop-2″></i> info@livefreewellness.co.uk</h5></font>
<h5><i class=”icomoon-phone-2″></i> 020 8780 0898</h5>
</div>

[Paul R]

Hi Kathy,

Please replace your code with this.

<div class="top-links top-co-inf rgtflot">	
	<h5><a href="mailto:info@livefreewellness.co.uk" style="color:#8B4513;"><i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i> info@livefreewellness.co.uk</a></h5>
 	<h5><a href="tel:020 8780 0898"><i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i> 020 8780 0898</a></h5>
</div>

Hope that helps.

[kbosland]

That is fantastic, thank you so much. One last question, there is a lot of white space, how do I get those two links closer together and less white space above and below?

[Paul R]

Hi,

Try adding a margin, kindly replace it with this.

<div class="top-links top-co-inf rgtflot">	
	<h5 style="margin:5px 0;"><a href="mailto:info@livefreewellness.co.uk" style="color:#8B4513;"><i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i> info@livefreewellness.co.uk</a></h5>
 	<h5 style="margin:5px 0;"><a href="tel:020 8780 0898"><i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i> 020 8780 0898</a></h5>
</div>

You may change 5px to adjust the spacing.

Hope that helps.

[kbosland]

Hello,
On this website:
http://schoolgate.bosland.com/

How would I get the top links centered and on one line (at least for the bigger screens)

[Paul R]

Hi,

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

.top-links {
    text-align:center;
}

.top-links h5 {
   display:inline-block;   
}

.top-links h5:first-child {
    margin-right:20px !important;
}

.x-topbar p:empty  {
   display:none !important;
}

Hope that helps.

[Author]

Posts