@lion_no - add all this css
@media only screen and (min-width:590px){
.mobile-nav__item .mobile-nav__faux-link, .mobile-nav__item a:not(.megamenu__promo-link) {
font-size: 20px;}
}
Topic summary
Initial Issue (Motion Theme):
User encountered problems styling the side menu drawer in Motion theme, as Typography settings were being ignored. They wanted to modify font, text size, letter spacing, and line height, plus add a logo at the top.
Solution Provided:
Custom CSS code was shared to adjust font sizes in the mobile navigation drawer by adding styles to theme.css. Multiple iterations were needed to target all elements including subcategories and “ACCOUNT” text.
Later Discussion (Dawn Theme - 2023):
Another user requested similar text size modifications for Dawn theme’s mobile/desktop menu.
Additional Customizations Addressed:
- Making mobile menu open only halfway (70% width) instead of full screen
- Removing navigation arrows from menu items
- Adjusting header icon spacing and sizing
- Removing black divider lines between menu links while keeping specific borders
- Reducing spacing between menu items
Key Technical Details:
All solutions involved adding custom CSS to base.css or theme.css files. The !important flag was used to override default styles. Media queries targeted specific screen widths (e.g., min-width:590px, max-width:749px).
Outcome:
All reported customizations were successfully resolved through CSS modifications.
