Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 17, 2025 at 1:12 pm #1485576
    steviger

    Hi there,

    I’m using several slideshows in this project.
    I would like the navigation arrows to be more visible than they are now, a bit thicker for example. Can you tell me where I can adjust this because I can’t figure it out myself :)

    Cheers in advance!

    Steven

    June 17, 2025 at 2:16 pm #1485577
    Guenni007

    try this:

    #top .avia-slideshow .avia-slideshow-arrows a::before {
  background: rgba(0,0,0,0.7) !important;
}

#top .avia-slideshow .avia-slideshow-arrows svg {
  height: 2em;
  margin-top: 0 !important;
  line-height: 0 !important;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

#top .avia-slideshow .avia-slideshow-arrows a:hover svg {
  fill: yellow;
  transition: all 0.7s ease;
}

#top .avia-slideshow .avia-slideshow-arrows a:hover svg path {
  stroke-width: 1;
  stroke: yellow;
  stroke-linecap: round;
}

    because now i guess these icons are svg files allready. so to make them thicker use stroke-width on the path.

    June 17, 2025 at 2:37 pm #1485579
    steviger

    Thanks! It works like a charm.

    June 17, 2025 at 8:59 pm #1485593
    Rikard

    Hi,

    Great, I’m glad that @guenni007 could help you out :-)

    Best regards,
    Rikard

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