[btboganParticipant]

Hi guys,

Is there a way to put the socials in the top footer widget area and not the bottom footer area?

thanks

[RadModerator]

Hi there,

Thanks for posting in.

Yes, possible. Please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery('.x-colophon .x-social-global').prependTo('.x-colophon.top');

Then this CSS to Admin > Appearance > Customizer > Custom > CSS

  .x-colophon.top .x-social-global {
    margin: 10px 0;
text-align: center;
}
.x-colophon.top .x-social-global a {
    margin: 0 1.25%;
    font-size: 21px;
}

Cheers!

[btboganParticipant]

ok thanks.

now will that get in the way of other widgets i place there in the footer widget area?

[btboganParticipant]

so that did not seem to change anything.

http://www.barrettbogan.com

[ChristopherModerator]

Hi there,

Please add a text widget and insert following code :

<div class="x-social-global"><a href="https://www.facebook.com/barrettbogan" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a><a href="https://twitter.com/barrettbogan" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a><a href="https://www.instagram.com/barrettbogan/" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a></div>

Hope it helps.

[btboganParticipant]

WELL, it placed the icons and the links, but not exactly the same as the ones in the bottom of the footer.

but i think i’ll just keep them where they are.

thank you so much for your help though.

i really appreciate it

thanks & God bless

[btboganParticipant]

actually, I would still like to know how to do this.

It seems like they have been placed in the widget area.

But the circle behind it is smaller than the icon itself which is why it loos weird. how could i make the circle bigger?

Also the icons are changing color on hover. how can i change the hover color of those icons to not change?

thank you so much

[RadModerator]

Hi there,

Please add this CSS as well.

.widget .x-social-global a, .widget .x-social-global a:hover {
    margin: 0 1.25%;
    width: 54px;
    height: 54px;
    font-size: 21px;
    line-height: 54px;
    color: hsl(0,0%,79%);
    background-color: rgba(255,255,255,0.2);
    border-radius: 100em;
}
  

Cheers!

[btboganParticipant]

looks great! thank you mucho!

blessings

[LelyModerator]

You’re welcome!

Cheers!

[Author]

Posts