I am using Stiletto theme.
my store url is: www.winnerofficial.com
How can I put the menu sections in lowercase and without the dividing bars? (only on mobile version)
Topic summary
A user working with the Stiletto theme wants to modify the mobile menu by converting section text to lowercase and removing dividing bars.
Solution provided:
- Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
- Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add a media query targeting screens up to 959px width
- Apply CSS to
.drawer-menu__itemclass with:text-transform: lowercase !important;(converts text to lowercase)border-bottom: none !important;(removes dividing bars)
The solution includes a code snippet and visual result screenshot. The responder requests the user mark the post as a solution if it resolves the issue.
1 Like
Hi @martujv
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 959px){
.drawer-menu__item {
text-transform: lowercase !important;
border-bottom: none !important;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like