Change Facebook & Twitter icons.

Home Forums Jevelin Theme Change Facebook & Twitter icons.

Home Forums Jevelin Theme Change Facebook & Twitter icons.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    RESOLVED Posts
  • roobinda
    Participant

    Hi there.

    Is it possible to do this?

    Many thanks.

     

    Hi @roobinda,

     

    Thank you for your question.

     

    Do you mean the icons displayed in the header as shown in the attached screenshot?

     

    These icons are displayed by http://simplelineicons.com/ so we can try changing theme using CSS code if you tell us to which icons you want to display in place of them.

     

    Best regards,
    Shufflehound team

    Attachments:
    You must be logged in to view attached files.

    roobinda
    Participant

    Yes, the social media icons in the header. Is it possible to replace these with png images?

    Or at the very least put a circle around the simple line icon?

    We can achieve both but adding a circle around the simple line icon is easy one.

     

    You can try achieving it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    #page-container li.menu-item.sh-nav-social a {
    border: 1px solid #fff;
    border-radius: 100%;
    padding: 0 10px;
    margin: 30px 5px 0 0;
    }

    roobinda
    Participant

    That creates a white circle around the icon, but obviously when you scroll down and the header becomes white, it’s invisible. The icons change from white to black.

     

    It also seems to move independently when you scroll.

    Try using the following CSS code instead of above CSS code.

    #page-container li.menu-item.sh-nav-social a {
    border: 1px solid #fff;
    border-radius: 100%;
    padding: 0 10px;
    margin: 30px 5px 0 0;
    transition: .3s margin ease-in-out;
    }
    #page-container .sh-sticky-header-active li.menu-item.sh-nav-social a{
    margin: 15px 5px 0 0;
    border-color: #000;
    }

     

    roobinda
    Participant

    That works well for the home page, but on other pages, when there’s no need for the circle to change colour, it still does.

     

    Also, out of interest, why are the social media buttons slightly lower than the nav text?

    Could you please share me your site URL where it’s happening so that i can troubleshoot it?

    roobinda
    Participant

    Sure – thelostdisco.co.uk

    Please try using the below CSS code replacing the previously provided code.

    #page-container li.menu-item.sh-nav-social a {
        border: 1px solid #000;border-radius: 100%;padding: 0 10px;
        margin: 28px 5px 0 0;transition: .3s margin ease-in-out;
        }
        body.home #page-container li.menu-item.sh-nav-social a {
            border-color: #fff;
        }
    
    body #page-container .sh-sticky-header-active li.menu-item.sh-nav-social a{
        margin: 12px 5px 0 0;
        border-color: #000;
        }
    
    #page-container li.menu-item.sh-nav-social a i {
        bottom: -2px;
    }

    roobinda
    Participant

    Amazing! Thank you!

    You are most welcome here 🙂

Viewing 12 posts - 1 through 12 (of 12 total)