Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 27, 2023 at 8:53 pm #1405874
    G4Design

    I am using the option to display the icons to the right of the menu. I need to make some modifications but not sure how.

    1. remove the hover effect so that the icons display with the proper color without having to mouse over
    2. change the Instagram icon color to #d92e7d so that it matches the brand
    3. make them a little bigger

    I did figure out how to remove the radius already so they are square instead of round so i am good there.

    here is the url of the site: https://rosamaemedicalbilling.com/

    Additionally if we ended up wanting to change the icons to actual images in that same section, is that possible to do? We don’t want to have to move them to the top bar in order to accomplish it.

    Thanks for your time!
    Corey

    April 27, 2023 at 8:54 pm #1405875
    G4Design

    Forgot to set to notify me. Thanks

    April 28, 2023 at 1:24 am #1405888
    Mike

    Hi,
    To change your social icons to images try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .social_bookmarks li:hover a {
  background: transparent !important;
}
#top .social_bookmarks li a:before{
  content: "";
  display: block;
  width: 30px;
  height: 30px;

}
#top .social_bookmarks li.social_bookmarks_facebook a:before {
  background: url(https://img.icons8.com/offices/30/000000/hot-air-balloon.png) center center no-repeat;
  background-size: contain;
}

#top .social_bookmarks li.social_bookmarks_instagram a:before {
  background: url(https://img.icons8.com/offices/30/000000/hot-air-balloon.png) center center no-repeat;
  background-size: contain;
}
#top .social_bookmarks li.social_bookmarks_linkedin a:before {
  background: url(https://img.icons8.com/offices/30/000000/hot-air-balloon.png) center center no-repeat;
  background-size: contain;
}

    and change the image urls to yours.
    If you are going to use your own images you can change the height & width in the css above to make them the size you wish, if you are not going to use your own image you can change the font icon size with this css, adjusting to suit:

    #top #wrap_all .social_bookmarks li a {
  width: 30px!important; 
  line-height: 30px!important; 
  min-height: 30px!important; 
  font-size: 20px!important; 
  }
  
  #top #wrap_all .social_bookmarks li {
  height: 20px!important; 
  width: 30px!important; 
  }
  
  #top #wrap_all .social_bookmarks {
      height: 60px!important;
  }

    To change the colors try this css:

    #top #wrap_all .av-social-link-facebook a,
#top #wrap_all .av-social-link-facebook:hover a {
    color: #fff;
    background-color: #37589b;
    text-decoration: none;
}  
#top #wrap_all .av-social-link-instagram a,
#top #wrap_all .av-social-link-instagram:hover a{
    color: #fff;
    background-color: #d92e7d;
    text-decoration: none;
}
#top #wrap_all .av-social-link-linkedin a,
#top #wrap_all .av-social-link-linkedin:hover a {
    color: #fff;
    background-color: #419cca;
    text-decoration: none;
}

    Best regards,
    Mike

    April 28, 2023 at 6:37 pm #1405955
    G4Design

    Thank you. This worked perfectly. I appreciate your help!

    April 28, 2023 at 8:06 pm #1405960
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Modify Social Media Icons in Header/menu’ is closed to new replies.