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

Solved

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

Okcorral
Excursionist
13 0 7

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

 

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

 

Accepted Solution (1)

LitCommerce
Astronaut
2860 684 745

This is an accepted solution.

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 4 (4)

LitCommerce
Astronaut
2860 684 745

This is an accepted solution.

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Okcorral
Excursionist
13 0 7

Thank you so much!! it looks great!!

WeAreFairTrade
Shopify Partner
24 0 12

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

FD2024
Shopify Partner
1 0 0

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