Shopify themes, liquid, logos, and UX
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
And this is what it looks like now but I want the arrows to be thicker and more to the center
Solved! Go to the solution
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!
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!
Thank you so much!! it looks great!!
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
This helped me too. Is there a way to make the actual triangle smaller please?
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025