Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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 */
}
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 */
}
also id like to make my menu dropdown rounded if possible.
Thanks for any help!
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 */
}
works great, thanks. Any clue how to edit the language and currency corners too?
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 */
}
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025