[ncfan2030Participant]

Is it possible to add an email icon to the top right where the social icons usually are placed?

[ThaiModerator]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[ncfan2030Participant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for updating. You can place content on Topbar from Appearance > Customize > Header > Topbar Content.

To place an email link, you can use – <a href="mailto:yourmail@domain.com">[icon type="envelope"]</a>

Hope this helps.

Cheers!

[ncfan2030Participant]

Hello,

That did not work. I tried it and it just displayed the shortcode. Also, I wanted it to be on the right, not the left.

Can I replace one of the social icons with a mail icon?

[Paul RModerator]

Hi,

Sorry about that, shortcodes doesn’t work in the topbar content.

You can try this code instead.

 <a href="mailto:yourmail@domain.com"><i class="x-icon x-icon-envelope" data-x-icon=""></i> Contact Us</a>

Hope that helps.

[Joao BParticipant]

Hi

Im trying to do something similar @ http://www.cabrones.com.br/

I would like to have the email icon, with a circle around (just like the facebook icon) beside facebook and aligned with facebook. How can I do that, I tried to add float right but than the facebook icon disappears.

Thanks

Joao

[Joao BParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-topbar .p-info {
    float: right;
    text-align: right;
    width: 100%;
}

p.p-info a:hover i {
    background-color:#278665;
    color:#e5a44f;    
}

i.x-icon.x-icon-envelope {
    text-align:center;
    background-color: rgba(255,255,255,0.2);
    border-radius: 100em;
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin-top:-7px;
    margin-right: 20px;
}

@media (max-width:979px) {
    .x-topbar .p-info {
        float: right;
        text-align: right;
        width: 8%;
        display: block;
    }
    .x-social-global {
        margin-right:-80px;
    }
    i.x-icon.x-icon-envelope {
        margin-right:10px;
    }
}

@media (max-width:767px) {
    .x-topbar .p-info {
        float:left;
        text-align: center;
        width:96%;
        margin-right:-90%;
        margin-top:7px;
    }
    .x-social-global {
        margin-right:0px;
    }

}

@media (max-width:480px) {
    .x-topbar .p-info {
        float:left;
        text-align: center;
        width:95%;
        margin-right:-100%;
        margin-top:7px;
    }
    .x-social-global {
        margin-right:-15%;
    }
}

Hope this helps – thanks!

[Author]

Posts