Topic: TOPBAR — add email address and phone number + icons

Author

Posts
February 9, 2016 at 4:30 am #786839

Studio57
Participant

I’ve been reading this forum but I can’t seem to find the right solution.

I found the code below and added it to the TOPBAR CONTENT box, anabled Legacy Font Classes in Cornerstone Settings (is this a bad or old fashioned thing?) but I can’t get it to work:

 | | 

Can you help me with the right HTML-code (sorry — not a programmer…) for my email address for example “info@emailaddress.nl” and phone number “+31 6 12 34 56 78”? There’s no need for vertical separators per se..

February 9, 2016 at 6:55 am #787039

Thai
Moderator

Hi There,

Please try adding the following HTML instead:

<a href="/contact"></a> | <a href="/my-account"></a> | <a href="/cart"></a>

Hope it helps 🙂

February 9, 2016 at 8:11 am #787153

Studio57
Participant

Thanks, but not quite… 🙂

I want to show a phone icon and my phone number +31 6 12 34 56 78. Next to that I want to show an envelope/email icon and my emailaddress info@example.com. Can I make the emailaddress clickable?

Can you help me with the correct HTML-code?

February 9, 2016 at 10:43 am #787400

Thai
Moderator

Hi There,

Please update the HTML code to this:

<a href="/contact"> +31 6 12 34 56 78</a> | <a href="mailto:info@example.com"> info@example.com</a> | <a href="/my-account"></a> | <a href="/cart"></a>

Hope it helps 🙂

February 9, 2016 at 1:32 pm #787773
Studio57
Participant
Thanks! Not quite what I meant but I think I’ve managed it:
```
<a href="mailto:info@studio57.nl"> Email me</a> &nbsp; &nbsp; &nbsp; 
<a href="tel:+31614243450"> Call me +31 6 14 24 34 50</a>
```
February 10, 2016 at 12:08 am #788542

Christian
Moderator

Glad you’ve sorted it out. For more in depth setup, you might want to contact our trusted partners who caters X setup and customization needs. Please see https://theme.co/x/member/custom-development/.

February 11, 2016 at 11:06 am #791334

Studio57
Participant

It doesn’t look so nice on mobile, on a smaller screen the phone and email in the Topbar gets an outline. Is there something I can do about that?

February 11, 2016 at 5:14 pm #791872

John Ezra
Member

Hi there,

Thanks for updating the thread! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

February 17, 2016 at 5:46 am #799724

Studio57
Participant

This reply has been marked as private.

February 17, 2016 at 8:14 am #799893
Thai
Moderator
Hi There,

Please try adding the following CSS under Customize > Custom > CSS:
```
@media (max-width: 480px){
 .x-topbar .p-info a {
 display: block;
 }
}
```
Hope it helps 🙂
February 17, 2016 at 10:22 am #800056

Studio57
Participant

Thank you!

Also: I tried a different Stack (Renew instead of Ethos) and now the line is gone.

While we’re talking about the Topbar Content — is it possible to change the rollover color of the social icons and change the shape to square from the Renew Stack?

February 17, 2016 at 8:11 pm #800814
Rue Nel
Moderator
Hello Again,

To change the rollover color of the social icons and change the shape to square, please add the following css code in the customizer, Appearance > Customize > Custom > CSS
```
.x-social-global a {
 background-color: rgba(255,255,255,0.5);
 border-radius: 0px;
}

.x-social-global a:hover.facebook {
 background-color: red;
 color: white;
}

.x-social-global a:hover.linkedin {
 background-color: green;
 color: white;
}
```
We would loved to know if this has work for you. Thank you.
February 23, 2016 at 2:23 am #808159

Studio57
Participant

Thanks! 😀

February 23, 2016 at 2:42 am #808188

Nico
Moderator

You’re most welcome.

Feel free to ask us again.

Have a great day! 🙂
Author

Posts