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
145 19 34

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.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

devcoders
Shopify Partner
145 19 34

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.
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
145 19 34

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.
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
145 19 34

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.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!