Remove Social Icon Circle background from PRO Hero Header

Support
#1

Hi,

I have set up a hero header and added some social icons but i really want to remove the circle background from the icons. Is there a way to do this? I am using the pro theme.

thanks.

Chris

#2

Hi Chris,

You can click on the social icon and set its background color to transparent then change the color of the icon to make it visible to its content area.

Hope this helps.

#3

Hi Jade,

Thanks for this. I have done that now but the circle still then appears when i hover over it. Can this also be removed?

thanks.

#4

Hi There,

Please provide us with the URL to your site, so that we can assist you accordingly.

Thanks!

#5

Hi both. Finally found the option! I must need stronger glasses. All sorted now. Thanks for your help guys :smile:

#6

Glad you were able to figure it out :slight_smile:

#7

Hi there,

Im having the same issue.
I’d like to remove the circle and square from the background of the icon’s.

http://epilepsyandmelifestyle.com/

I tried what is shown on the screenshot, but it didn’t work out.

Can anyone assist with this?

Many thanks!

#8

Hi @Epilepsyanrme.lifest,

Thanks for writing around! To remove the circle and square from the background of the icons, please add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.x-anchor-button {
    box-shadow: none !important;
}

Let us know how this goes!

#9

Thank you very much. It worked!

May I ask, does it matter where in my global CSS I put this code (ie: very top, very end, somewhere in the middle)?

Also, is this code only for the home page, or will it apply to any other place I put the social icon?

Many thanks!!

#10

Hey There,

Thanks for updating us in!

  • The css can be added anywhere in the global css. The best practice in adding a css is to indent it and make sure that all your @media blocks will be at the bottom of all other css styles. For example:
element {
  // your styling here
}

#element-ID {
  // your styling here
}

.element-class {
  // your styling here
}

@media(max-width: 979px){
   element {
    // your styling here
  }
}
  • Yes this code can work globally. It will also affect the icons in other pages. If you want to make sure that you only apply the css for the homepage alone, you can make use of this code:
.home .x-anchor-button {
    box-shadow: none !important;
}

Hope this helps. Please let us know how it goes.