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.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024