Venture theme drop down menu arrow. Too invisible.

nadatouma
Tourist
6 0 0

I want to change the color AND shape to look like this ▼ and up like this ▲. Also for the side menu as well instead of the + and -. Or any arrow that is clearly visible.

0 Likes
DigitalArtisans
Shopify Partner
325 44 58

Hello @nadatouma !

 

Here is a step-by-step instruction that can help you to find the place where you can change the arrow scroll color arrow to red.

 

Please, test changes in a theme copy first vs editing the live theme (unless you are really sure it will work). Duplicate the theme and test things in the copy.

 

Follow these steps:

 

  1. From your Shopify admin, go to Online Store > Themes (In this example I have managed Venture theme).
  2. Choose "Edit code" from the "Actions" drop-down menu.
  3. On the Edit HTML/CSS page, you can edit the Assets / theme.scss.liquid file.
  4. You should find the following lines in the file (the code is about 3816 line):

 

/================ Slider arrows ================/

.product-single__thumbnails.slick-initialized {

  .slick-prev,

  .slick-next {

    opacity: 0.2;

    transition: opacity 0.15s ease-in;

    width: 30px;

    height: 30px;

 

    &:before {

      display: none;

    }

 

    &:hover,

    &:focus {

      opacity: 0.7;

    }

 

    .icon {

      fill: $color-body-text;

      width: 30px;

      height: 30px;

    }

  }

 

  .slick-disabled {

    opacity: 0;

    visibility: hidden;

  }

}

 

 

Replace a current color variable "$color-body-text" with red: "#f00000". You can add another one color value that you need.

 

You can change an arrow opacity in the 3820 line and a hover in the 3831 line.

 

Hope this helps!

 

Thanks,

Digital Artisans

Hatim Ayoub | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted
0 Likes