Rearrange order of social links in topbar?

Home › Forums › Gillion Theme › Rearrange order of social links in topbar?

Home › Forums › Gillion Theme › Rearrange order of social links in topbar?

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    RESOLVED Posts

  • starboardcreative
    Participant

    Is it possible to rearrange the order of the social media links in the topbar on the Gillion theme?

    Shufflehound
    Moderator

    Hi there,

     

    At the moment we don’t have such an option.

    If needed we can create a custom CSS code to change the order of the social media links.

     

    Best regards,

    Shufflehound team

    starboardcreative
    Participant

    Is that possible for you to send me? The CSS code to change the order? Our order right now is:

    Facebook – Twitter – Instagram – Pinterest – YouTube – LinkedIn

    We’d love to have it as:

    Instagram – Facebook – Pinterest – Tiktok – LinkedIn – Twitter – YouTube

    Shufflehound
    Moderator

    Hi there,

     

    Can you please share a link to your website? We will need it to create the custom code.

     

    Best regards,

    Shufflehound team

    starboardcreative
    Participant

    Sure! It is below:

    Shufflehound
    Moderator

    You can try this custom CSS that you can add in the Gillion Settings > Custom CSS/JS section:

    .primary-desktop .social-media-instagram { order: 1; }
.primary-desktop .social-media-facebook { order: 2; }
.primary-desktop .social-media-pinterest { order: 3; }
.primary-desktop .social-media-tumblr { order: 4; }
.primary-desktop .social-media-linkedin { order: 5; }
.primary-desktop .social-media-twitter { order: 6; }
.primary-desktop .social-media-youtube{ order: 7; }

     

    Let us know if that works!

    • This reply was modified 1 year, 11 months ago by Shufflehound.

    starboardcreative
    Participant

    Hmmmm that didn’t seem to work. Do I need to put !important with all of that css?

    Shufflehound
    Moderator

    Can you please also add this custom code below:

    .primary-desktop .header-social-media {
    display: inline-flex;
}

     

    Let us know if that fixes it. 🙂

    starboardcreative
    Participant

    It did! Thank you so much. Just one other question… is there a way to add a TikTok icon with link in the place of the Tumbler one? We don’t use Tumbler anymore but do have a TikTok account we would love to have up there and link out to.

    Shufflehound
    Moderator

    That is great! 🙂

     

    Unfortunately, currently, our main theme icon pack doesn’t have the Tiktok icon. But we will consider adding it.

    starboardcreative
    Participant

    Ok, good to know. Yes yes, please do consider adding it.

    Shufflehound
    Moderator

    Sure! But, currently, we can’t give any ETA for that.

    starboardcreative
    Participant

    Ok! Before I close this ticket (if that is needed) is there any way, with CSS, to override the icon for Tumbler to make that the TikTok icon and I’ll just use that space for that URL in the WP-admin theme settings?

    Shufflehound
    Moderator

    You can try this custom CSS snippet for the Tiktok icon:

    .fa-tumblr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23525252'%3E%3C!--! Font Awesome Pro 6.4.0 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons  Inc. --%3E%3Cpath d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25V349.38A162.55 162.55 0 1 1 185 188.31V278.2a74.62 74.62 0 1 0 52.23 71.18V0l88 0a121.18 121.18 0 0 0 1.86 22.17h0A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 16px;
}

.fa-tumblr:before{
    opacity: 0;
    display: inline;
}

     

    Let us know if that works.

    • This reply was modified 1 year, 9 months ago by Shufflehound.
    • This reply was modified 1 year, 9 months ago by Shufflehound.

    starboardcreative
    Participant

    That worked! Brilliant. Thank you so much for your help on this.

    Shufflehound
    Moderator

    You are welcome! 🙂

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)