# Change size of navigation arrows

**URL:** <https://community.elfsight.com/t/change-size-of-navigation-arrows/56823>\
**Category:** Before and After Slider\
**Created:** [June 13, 2024, 12:28pm UTC](https://community.elfsight.com/t/change-size-of-navigation-arrows/56823 "2024-06-13T12:28:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 13, 2024, 12:28pm UTC](https://community.elfsight.com/t/change-size-of-navigation-arrows/56823/1 "2024-06-13T12:28:37Z")

</div>

Add this code to the Custom CSS field on the Style tab of your [Before and After Slider](https://elfsight.com/before-and-after-slider-widget/) widget’s settings:

```auto
.eapp-before-and-after-slider-navigation-arrow svg {
    width: 48px;
    height: 48px;
}

```

---

<div class="post-metadata">

**Author:** ![Bret](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/bret/32/103077_2.png) [@Bret](https://community.elfsight.com/u/Bret)\
**Post date:** [July 24, 2025, 7:42pm UTC](https://community.elfsight.com/t/change-size-of-navigation-arrows/56823/2 "2025-07-24T19:42:23Z")

</div>

Im installing the css in the style tab but its not working.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 25, 2025, 6:19am UTC](https://community.elfsight.com/t/change-size-of-navigation-arrows/56823/3 "2025-07-25T06:19:43Z")

</div>

This code is for the arrows under the slider in Carousel layout. I’ve double-checked the code, and it works great 🙂

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/8/b81c560cf4f08efa9ce21af84ecf03a1ca8455e6.jpeg)