Rounded corners on the language and currency drop-down panels

Store Design
, , , ,
1

Hi! :blush:

I have a small question about the layout of the dropdowns, I am using the Dawn theme and the language and currency exchange dropdowns have pointed corners, I would like to be able to make them more rounded by adjusting them.

Is there any code to do this? I also take this opportunity to ask if there is any code to remove the line that appears when hovering over these sections and make some hover effect as the letters are with little opacity and when hovering or clicking on them become white, as well as making the corners of the search engine completely round.

I attach screenshots.

S1.png
S1.png1382×874 131 KB

s2.png
s2.png814×364 127 KB

S3.png
S3.png1006×1010 82.9 KB

Thanks in advance!

2

Sure, Ritu!

This is it: https://79378a-2.myshopify.com/

Thanks!

3

Hey @Crearten ,

To remove the border on hover you need to replace the “component-localization-form.css”.

for that follow below steps:

  1. Go to online store > edit code :
  2. search “component-localization-form.css” file and open it.
  3. find "header-localization .disclosure .localization-form__select:hover" it might located in line number 369
  4. Replace the code with this “.header-localization .disclosure .localization-form__select:hover {text-decoration: none;}”

For making border more rounded :

in base.css add this css : “.disclosure__list-wrapper .country-filter .field:after {border-radius: 50px !important;}” and save it.

I hope this solution will help you

Thanks,

Ritu

1 Like
4

Great! That worked Ritu, thanks a lot :slightly_smiling_face:

Would you know if anything can be done about my other doubts? That is, round the corners of the dropdowns of the country and currency selector, I attach a more graphic example:

Thanks again!

Ra.jpg
Ra.jpg2454×2664 326 KB

5

hey @Crearten ,

It’s great that you find it helpful.

To make the border round you need to add the code to “component-localization-form.css”.

.header-localization:not(.menu-drawer__localization) .disclosure__list-wrapper{ border-radius:30px**;** } “Add this css”.

Also for making selected with border :

.disclosure__link[aria-current=“true”] {border: 1px solid; border-radius: 50px; } add this into “component-localization-form.css”.

it will now looks like this : https://prnt.sc/wUgfjUjR772x

If this helps you please mark it as an accepted solution.

Happy to help you.

Thanks,

Ritu

1 Like
6

This is already looking great! You are a genius Ritu. :wink:

As a last request, could you know how to make round the corners only of the finder and hide the vertical scrollbar? It looks a bit strange now having applied the rounding mask.

Thanks a thousand times!

SEARCH.png
SEARCH.png859×740 70.6 KB

7

Hey @Crearten ,

Thank you,

Here is some css code you need to add it in base.css.

.country-selector__list::-webkit-scrollbar { width: 5px;}
.country-selector__list::-webkit-scrollbar-thumb {background: #eee; border-radius: 10px;}

Once you save it then it will look like this:

Ritu25_0-1707380689717.png
Ritu25_0-1707380689717.png1568×499 286 KB

For making border more rounded :

in base.css add this css : “.disclosure__list-wrapper .country-filter .field:after {border-radius: 50px !important;}” and save it.

Thanks,

Ritu

If you need more help just contact me [email removed] nayakritu.2506@gmail.com

1 Like
8

You are great Ritu, you solved all my problems!

Thank you so much for the detailed explanations, keep it up. :smiling_face_with_sunglasses:

Have a nice day! :blush:

1 Like