Social Icons in topbar

Hi there. I’ve been trying to find the best way to have social icons in the topbar. I have a temporary solution that works right now but from what I’ve been told it is not the best practice and might not sustain future updates.

The way I have it working right now is by copying the html from the footer social icons and copying it in the topbar content section through the options menu. I’ve hidden the default topbar social icons through CSS.
This is what is in my topbar content section:

<a href="https://www.facebook.com/savkatsolar/" class="facebook top-icon" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon-b="" aria-hidden="true"></i></a><a href="https://twitter.com/SavkatSolar" class="twitter top-icon" title="Twitter" target="_blank" style="outline: none;"><i class="x-icon-twitter-square" data-x-icon-b="" aria-hidden="true"></i></a><a href="https://www.youtube.com/channel/UC9ZSLxaELSvJAizCVHT0pLg" class="youtube top-icon" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon-b="" aria-hidden="true"></i></a>

I’ve been looking through the forums and documentation but so far haven’t found anything specific on this topic. I was hoping someone could provide me and possible others struggling with this with a solid solution.

Thank you so much.

Hi there,

The social icons should be on the topbar by default.




Is the site in question the domain that I have placed in the secure note?

If so, it seems that you have added some codes in the CSS in the style.css to have the topbar social icons not show up which are:


.x-social-global a {
    color: #fff !important;
}

.x-topbar .x-social-global {
    display: none;
}

Please change the color value to other than white and remove the CSS block that sets the social icons display to none.

Hope this helps.

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