- This topic has 11 replies, 2 voices, and was last updated 8 years ago by
.
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 teamYes, 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; }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; }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?
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; }Amazing! Thank you!
You are most welcome here 🙂
