Webwondersco, thank you so much for the solution. Please, can you also help me with changing the color of the Menu Navigation Bar to any color with border lines? Thank you
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.
1 Like