Rounded corners on languange and currency dropdown. Dawn theme

[pikastore]

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

my website link is pikastore.cz

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

Thanks!

[devcoders · 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 */
}

[pikastore]

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

Thanks for any help! 

[devcoders · 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 */
}

[pikastore]

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

[devcoders · 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 */
}