Docs

[buehrert]

Hello,

On the following website:

http://www.saintvdpschool.org/

I have social media icons that appear in the footer area. I would like to add these same icons in the topbar as well, adjacent to the Donate button.

How can I do this?

Many thanks!

[Rupok]

Hi there,

Thanks for writing in! It’s already there but you have hide this with the following CSS :

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

Kindly remove this to get expected result. When you add any custom code to your site, make sure you know what you are doing to avoid potential conflicts.

Hope this makes sense.

Cheers!

[buehrert]

Yes, thanks for the tip. When I added that custom code a year ago I knew what I was doing, but I hadn’t revisited the code since, so some details had slipped my memory.

So I removed the code as prescribed above. Now is there a way to get the social icons to appear to the left of the “Donate” button and on the same line, rather than beneath that button? I’d like to avoid making the topbar any taller than a single line. I realize the Donate button is within a <span>, but I’m open other solutions as well.

Thanks again.

[Rue Nel]

Hello There,

Thanks for writing in!

To rearrange the social icons and position it to the left of you donate button, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery(function($){
  $('.x-topbar .x-social-global').prependTo('.x-topbar .p-info .alignright');
});

And you also need to add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-topbar .x-social-global {
    margin-top: 0;
}

Hope this helps.

[Author]

Posts