Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 22, 2018 at 8:15 pm #931594
    jleclair87

    I saw in this thread you can change the scroll to top icon. https://kriesi.at/support/topic/custom-scroll-to-top-icon/

    I added the code and it works but I was wondering if there is a way to make the background transparent or white when it is not hovered?

    March 22, 2018 at 9:18 pm #931646
    Basilis

    Hey jleclair87,

    You can go ahead

    
#scroll-top-link.avia_pop_class {
    opacity: 0.3;
    visibility: visible;
}

    and try that code – let me know if it works for you!

    Best regards,
    Basilis

    March 23, 2018 at 11:10 pm #932140
    jleclair87

    Hmm, i added that but there is still a backgournd on the non hover state… Rollover looks perfect! Non hover has a weird background.

    March 25, 2018 at 11:45 am #932580
    Vinay

    Hi,

    please remove this code in child theme

    #scroll-top-link.avia_pop_class {
    opacity: 0.3;
    visibility: visible;
}

a#scroll-top-link {
  background-image: url(//77.104.145.231/~atouch87/wp-content/uploads/2018/03/socialicon_top-1.png);
  background-position: 50% 50%;
  background-size: contain;
}
a#scroll-top-link:before {
  content: '';
  color: #000!important;
}

    and add the below code

    a#scroll-top-link:hover {
  background:gold;
  color:#000;
}
a#scroll-top-link {
  background:transparent;
  font-size:24px 
}
#top a#scroll-top-link .avia-font-entypo-fontello, 
body a#scroll-top-link .avia-font-entypo-fontello, 
html body a#scroll-top-link [data-av_iconfont='entypo-fontello']:before {
  color:#000;
}

    Best regards,
    Vinay

    March 26, 2018 at 7:03 pm #933145
    jleclair87

    Hm, if i remove that code my image custom background doesn’t show up…. Also the code in my CSS varies from the one asked to remove…

    March 27, 2018 at 1:12 am #933276
    Vinay

    Hi,

    Your initial request was to make the background transparent but if you like to add the image I have updated the code for you :)

    Please use the below code.

    a#scroll-top-link:hover {
  background:gold;
  color:#000;
}
a#scroll-top-link {
background-image: url(//77.104.145.231/~atouch87/wp-content/uploads/2018/03/socialicon_top-1.png);
  font-size:24px 
}
#top a#scroll-top-link .avia-font-entypo-fontello, 
body a#scroll-top-link .avia-font-entypo-fontello, 
html body a#scroll-top-link [data-av_iconfont='entypo-fontello']:before {
  color:#000;
}

    Best regards,
    Vinay

    March 28, 2018 at 1:17 am #933966
    jleclair87

    thanks

    March 28, 2018 at 12:09 pm #934186
    Vinay

    Hi,

    Glad we could help :)
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about Enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Custom scroll to top icon’ is closed to new replies.