Can I change the style of the drop down arrows on my main menu?

Store Design
1

I’m currently using the theme Turbo-Tennessee and the main menu drop down arrrows are very thin and easy to miss, especially when you’re looking at the website on your phone (our URL is Okcorralww.com). I was looking around the code and was able to successfully make the arrows some what bigger but they are still very easy to miss so I wanted to see if I could change the arrows to be a different shape and maybe sit closer to the words when looking at the website on your mobil.

This is what it looked like before

before.png
before.png421×372 58.2 KB

And this is what it looks like now but I want the arrows to be thicker and more to the center

Screenshot 2022-01-05 174801.png
Screenshot 2022-01-05 174801.png406×467 74.7 KB

2

Hi @Okcorral ,

Go to Assets > styles.scss.liquid and paste this at the bottom of the file:

#mobile_menu .right.icon-down-arrow{
	float: none !important;
}
#mobile_menu .icon-down-arrow:before{
	content: "" !important;
    display: inline-block;
    border: 12px solid transparent !important;
    border-top: 12px solid #000 !important;
    border-bottom: 0 none !important;
    width: auto !important;
}
#mobile_menu .icon-down-arrow:hover:before,
#mobile_menu .icon-down-arrow:focus:before{
    border-top: 12px solid #af2525 !important;
}

Hope it helps!

3

Thank you so much!! it looks great!!

4

I had the same issue with the Turbo theme (Seoul) and it worked great for me too. I just tweaked the colours to fit my website theme.
Thanks so much for the solution

5

This helped me too. Is there a way to make the actual triangle smaller please?