Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #12679

    Hi, how can I change the color and % of the opacity of the round social media icons in the header?


    Hi Anna,

    Can you post a link to your site?




    Hi Ismael, so it looks like the opacity is the least of my problems. It seems that the social icon links are no longer working. I’ve made some changes since I last tested them, but not to the header.

    Here is my test site, about to go live with the first phase, so any help is greatly appreciated:

    The only things I’ve changed since they last worked was added the newsletter page with a MailChimp embed form (javascript/jquery):

    I’m also including the Quick CSS changes just in case that’s affecting this..?

    Thanks in advance!


    font: 12px/1.7em “Helvetica Neue”,Helvetica,Arial,sans-serif;

    color: #000;


    overflow-x: hidden;


    #top .title_container h1 {

    font-size: 20px;


    .breadcrumb-trail {

    font-size: 0px;

    text-decoration: none;


    .custom_hr_text a:hover{


    text-decoration: none;



    text-decoration: none !important;

    color: #9592f6 !important;


    #top div .price del {

    color: #BBBBBB;


    #top div .price ins {

    color: #8b26a1;


    #top div .price {

    color: #736986;


    #header .container{

    padding: 0px 0 0 0;

    z-index: 100;


    #top .logo{

    top: 0px;


    #header.boxed .container{



    .woocommerce_tabs #tab-description h2 {

    display: none !important;


    .woocommerce_tabs .tabs li {

    display: none;


    .woocommerce_tabs ul.tabs li:first-child {

    display: block;


    #top .main_menu .avia_mega ul ul li, #top .main_menu .avia_mega > li > ul li {

    background-color: #FFFFFF;

    background-image: none;

    background-position: 0 0;


    #footer .widget>ul, #footer .widget>div, #footer .widget>span, #footer .widget>p{

    opacity: 1 !important;


    tr.cart-subtotal th {

    background: none repeat scroll 0% 0% #f5f5f5 ! important;

    color:#fff !important;a

    } th {

    background: none repeat scroll 0% 0% #f5f5f5 ! important;

    color:#fff !important;


    th, td{

    text-align: left;

    padding: 15px;



    I also updated the woocommerce plugin. I thought perhaps that had done something, but I deactivated it and the social media icons still do not work…


    I figured it out. My logo was overlapping the icons and it was redirecting to the homepage. :)


    Hi Anna,

    Glad you were able to figure it out! Let us know if you need anything else :)



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

The topic ‘social media opacity color (header)’ is closed to new replies.