Topbar custom content

Support
#1

Hi,
I’d like to add an envelop icon with “mailto:…” next the social icons as well as an icon or text for sign-up to newsletter - is this possible and if yes how do I proceed ?

Here’s the website: https://delosdr.org/

Thank you

#2

Hi Anna,

Thank you for writing in, please follow the solution provided here.

Hope it helps,
Cheers!

#3

Thank you, where do I write the first snippet ?

#4

Hi Anna,

It should be in Theme Options > Header > MISCELLANEOUS > Topbar Content

Hope this helps.

#5

Hello again,

So I’ve integrated the codes - however no envelop appears … for now i’ve put “EMAIL” as text but would like it to be an envelop icon, please help me ;))

Thank you !!

#6

Hi Anna,

Please provide us login credentials in a secure note so we can take a closer look.

Thanks,

#7

Hi Anna,

I already updated the code:

<i class="x-icon x-icon-envelope mrm" data-x-icon-s="&#xf0e0;" aria-hidden="true"></i><a class="topbar-menu" href='https://delosdr.org/index.php/contact/'><span>EMAIL</span></a>

It is still not showing because you are using an older version of X and Cornerstone. Could you please update to the latest versions? Our latest versions are:

  • X theme 6.5.5
  • Cornerstone 3.5.4

This latest release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/).

_After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.-

Please let us know how it goes.

#8

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

#9

Hi Anna,

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-topbar .p-info {
    margin-top: 0;
}

.topbar-menu {
    margin-left: 6px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 18px;
}

Please let us know how it goes.

#10

Hi Anna,

In that case, please update your CSS to this

.x-topbar .p-info {
    margin-top: 0;
}

.topbar-menu {
    margin-left: 15px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 18px;
}

You can control the spacing by changing the left margin.

Hope this helps.

#11

You’re welcome! :slight_smile: