Navigation
Archive / How to add a contact email icon/button to the Top Bar
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • November 9, 2016 at 5:23 pm #1250752
    Hello
    Participant

    Hi,
    How to add a contact email icon/button to the Top Bar? The icon/button must be in the top right hand corner.

    I already have text in the left hand corner stretching to the middle of the screen.

    http://www.trillionpeak.com

    The Under Construction plugin is used.

    Thank you.

    November 9, 2016 at 10:26 pm #1251121
    Rupok
    Member

    Hi there,

    Thanks for writing in! As your website is under construction, please take it off or provide us the credentials in private reply so that we can check and assist you on this.

    Thanks

    November 10, 2016 at 4:04 am #1251448
    Hello
    Participant
    This reply has been marked as private.
    November 10, 2016 at 7:25 am #1251627
    Paul R
    Moderator

    Hi,

    Thank you for providing your login credentials.

    I went ahead and added one in your topbar content.

    Kindly check on your end.

    Thanks

    November 10, 2016 at 10:48 am #1251929
    Hello
    Participant

    Hi,
    That’s great thanks! But it’s slightly too far to the right. Could you help aligning it so the right side is in line with the right side of the Cart.

    Also how can the words “Contact” be added to the left side of the icon in Verdana. The same as the left text in the Top Bar.

    Thank you.

    November 10, 2016 at 11:21 am #1251970
    Hello
    Participant

    Hi
    Please help with linking it to an email account and Contact Form 7. I like to test both.

    Regards

    November 10, 2016 at 12:56 pm #1252118
    Joao
    Moderator

    Hi There,

    I have added the contact word for you there.

    To add your email, go to Appereance > Customizer > Header > Topar Content and change : [email protected] for your email on the code:

    

<div style="float:right;"><a style="font-size: 11px;" href="mailto:[email protected]"> CONTACT &nbsp <i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></a></i></div>

    Hope that helps

    Joao

    November 10, 2016 at 4:49 pm #1252372
    Hello
    Participant

    That’s great! Thank you. How do I change the colour? Also the email icon is too far to the right.

    Please can you help align it with the Cart so both right side are in vertical alignment.

    November 10, 2016 at 11:23 pm #1252828
    Rupok
    Member

    Hi there,

    To change the color, you can add CSS to the style attribute.

    <div style="float: right; margin-right: 180px;"><a style="font-size: 11px; color: #333" href="mailto:[email protected]"> CONTACT &nbsp; <i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i></a></div>

    Hope this helps.

    November 11, 2016 at 1:24 am #1252914
    Hello
    Participant

    I will test it. Thanks. How about the aligemt?

    November 11, 2016 at 2:02 am #1252951
    Rupok
    Member

    Hi there,

    Thanks for writing back. I have added the style to align it as well. Let’s check and let us know how it goes.

    Cheers!

    November 11, 2016 at 4:40 am #1253143
    Hello
    Participant
    This reply has been marked as private.
    November 11, 2016 at 7:54 am #1253314
    Joao
    Moderator

    Hi There,

    I have updated your topbar code to :

    
<div style="float:right; margin-right: 10%; margin-top: 4px;"><a style="font-size: 11px; color: black;" href="mailto:[email protected]"> CONTACT &nbsp; <i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i></a></div></i></div>

    You can go to Appereance > Customizer > Header > Top bar content, and change the margin-right % to adjust according to your wishes and the color from black to any color you like,

    Hope it helps

    Joao

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1250752 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>