Yes please, that and changing the menu navigation bar color from white to black. Attached is a screenshot
Topic summary
Goal: make the Ella theme’s mobile navigation narrower and adjust its colors/states.
What was tried:
- Width: A helper suggested adding a media query in the theme’s CSS (base.css/style.css/theme.css) to limit the mobile menu drawer width on small screens: target .halo-sidebar with max-width: 300px at max-width: 550px. Screenshots show a narrower drawer as the intended result.
- Alternative placement: Another helper proposed adding CSS in theme.liquid above and tweaking a width (noted as 70%), but the actual code wasn’t visible in the post.
Color/states request:
- OP asked to change the mobile menu background to black, add borders, and change color on click/active.
- Helpers sought clarification (text vs. background). OP confirmed background and active state.
- Selectors span.mobileMenu-toggle__Icon and its ::before/::after were explained as controlling the 3-line hamburger icon color. OP changed it but text turned black unintentionally.
Status and gaps:
- Width solution provided; no confirmation it worked.
- Color/background/active-state styling remains unresolved due to missing/unclear CSS and selectors for Ella’s mobile menu container.
- Screenshots are central to the desired look. Discussion is ongoing without a final fix.
