Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottom of the file:
header.header {
max-width: 100%!important;
}
Topic summary
Goal: Move the Dawn theme’s header elements (menu on left, account/cart on right) closer to the page edges.
Key steps provided:
- In Online Store > Themes > Actions > Edit code, open Assets > base.css.
- Add CSS to make the header full-width: header.header { max-width: 100% !important; }.
Follow-up issue and fix:
- After widening the header, the dropdown (mega menu) still aligned to the previous, narrower width.
- Add CSS in base.css to also set the mega menu list to full width (max-width: 100% !important) so the dropdown aligns with the new header width.
Notes:
- “CSS” (Cascading Style Sheets) changes were the sole solution; no theme files beyond base.css were modified.
- Screenshots were shared to illustrate the current vs. desired header alignment and the dropdown misalignment.
Outcome:
- First CSS change successfully moved header items toward the edges.
- Second CSS change aligned the dropdown menu with the new header width.
- User confirmed the solution works; issue resolved with no remaining open questions.
1 Like