Rounded corners on languange and currency dropdown. Dawn theme

Solved

Rounded corners on languange and currency dropdown. Dawn theme

pikastore
Tourist
11 1 3

Hello, I would like to make my corners rounded in this selector.

 

my website link is pikastore.cz

pikastore_0-1714295078214.png

I have tried a few codes mentioned here in forums and sadly none worked for me.

Thanks!

Accepted Solutions (2)
devcoders
Shopify Partner
899 115 233

This is an accepted solution.

Hi @pikastore 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.


.header__submenu {
border-radius: 10px!important; /* Adjust the radius as needed */
overflow: hidden!important; /* Ensures the child elements don't overflow the rounded corners */
}
.list-menu__item {
border-radius: 10px!important; /* Rounded corners for each menu item */
}
.list-menu__item a {
display: block!important; /* Makes the link fill the entire list item for better clickability */
padding: 10px!important; /* Adds padding to make the links taller and more clickable */
}
.details__summary {
border-radius: 10px 10px 0 0!important; /* Top corners rounded */
}
details[open] .details__summary {
border-radius: 10px 10px 0 0!important; /* Rounded top corners when open, flat bottom */
}
.details ul:last-child .list-menu__item {
border-radius: 0 0 10px 10px!important; /* Round bottom corners of the last item */
}

devcoders_0-1714296049451.png

devcoders_1-1714296068731.png

 



 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

devcoders
Shopify Partner
899 115 233

This is an accepted solution.

Hi @pikastore 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.


.disclosure__list-wrapper {
    border-radius: 10px!important; /* Adjust the radius as needed */
}

devcoders_0-1714299142518.pngdevcoders_1-1714299167298.png

 



 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

Replies 4 (4)

pikastore
Tourist
11 1 3

also id like to make my menu dropdown rounded if possible.

pikastore_0-1714295363099.png


Thanks for any help! 

devcoders
Shopify Partner
899 115 233

This is an accepted solution.

Hi @pikastore 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.


.header__submenu {
border-radius: 10px!important; /* Adjust the radius as needed */
overflow: hidden!important; /* Ensures the child elements don't overflow the rounded corners */
}
.list-menu__item {
border-radius: 10px!important; /* Rounded corners for each menu item */
}
.list-menu__item a {
display: block!important; /* Makes the link fill the entire list item for better clickability */
padding: 10px!important; /* Adds padding to make the links taller and more clickable */
}
.details__summary {
border-radius: 10px 10px 0 0!important; /* Top corners rounded */
}
details[open] .details__summary {
border-radius: 10px 10px 0 0!important; /* Rounded top corners when open, flat bottom */
}
.details ul:last-child .list-menu__item {
border-radius: 0 0 10px 10px!important; /* Round bottom corners of the last item */
}

devcoders_0-1714296049451.png

devcoders_1-1714296068731.png

 



 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
pikastore
Tourist
11 1 3

works great, thanks. Any clue how to edit the language and currency corners too? 

devcoders
Shopify Partner
899 115 233

This is an accepted solution.

Hi @pikastore 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.


.disclosure__list-wrapper {
    border-radius: 10px!important; /* Adjust the radius as needed */
}

devcoders_0-1714299142518.pngdevcoders_1-1714299167298.png

 



 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!