Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 8, 2026 at 4:42 pm #1494833
    deb_ugger

    Hi,

    I’m using the default Enfold SVG scroll-down icon in the hero section.
    The icon itself is rendered as an inline SVG and currently uses white fill/stroke, but my hero background is also very light/white, so the icon is barely visible.

    Question:
    Where is the correct place to change the color of this specific SVG icon?

    I tried styling .scroll-down-link svg via CSS, but it seems the color is controlled directly on the SVG / path level or overridden by the theme.

    What is the recommended way in Enfold to:
    – change the fill / stroke color of the scroll-down SVG icon
    – ideally without breaking updates or other icons?

    Thanks in advance.

    February 8, 2026 at 4:51 pm #1494834
    Guenni007

    try:

    #top .scroll-down-link.avia-svg-icon svg:first-child {
  fill: #900;
}
    February 8, 2026 at 4:54 pm #1494836
    deb_ugger

    Doesn’t work. Already tried !important:

    Okay, now it works. 20 minutes after refreshing the page multiple times :) Thanks!

    But it seems, that this color is somehow overwritten by Javascript.

    • This reply was modified 1 week, 4 days ago by deb_ugger.
    February 8, 2026 at 5:40 pm #1494846
    Guenni007

    i checked it here: https://kriesi.at/themes/enfold-one-page-portfolio/
    and in DEV Tools the code works well. – yes maybe try it with important:

    #top .scroll-down-link.avia-svg-icon svg:first-child {
  fill: #900 !important;
}

    on Enfold Performance Tab – did you check to “Delete Old CSS And JS Files?”

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.