Shopify themes, liquid, logos, and UX
I followed the code from this discussion and created the caret for my dropdown menu but the caret size is too big. How can I adjust it to be the appropriate size?
Below is my code and the results:
<svg style="display: none"> <symbol id="icon-caret" viewBox="0 0 10 6" > <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"> </path> </symbol> </svg> <div class="field"> <div class="select"> <select id="ContactForm-question" style="font-size: inherit; padding-top:0.4rem;" class="field__input select__select" name="contact[question]"> <option selected disabled>You have question about...</option> <option value="Missing Item">Missing Item</option> <option value="Wrong Item Received">Wrong Item Received</option> <option value="Damaged Item">Damaged Item</option> <option value="Others">Others</option> <label for="ContactForm-question" style="visibility: hidden;" class="field__label">You have question about</label> </select> <svg class="icon-caret" aria-hidden="true" focusable="false" viewbox="0 0 10 6" height="1rem;"> <use href="#icon-caret" /> </svg> </div> </div>
Hello @Ookii
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
.select .icon-caret {
height: 0.6rem !important;
width: 0.6rem !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Thanks so much, it worked!! (I changed for the size to be 1rem)
But the caret is outside of the dropdown menu... Is there any way I can bring it back in?
would you like to share your store URL and password if any please.
How can I do that? Sorry, I'm new to the community.
and now the box seems to have two layers.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024