How to adjust the header width to fit my website?

Store Design
,

Topic summary

A user seeks help adjusting their header width to match their website layout.

Two solutions proposed:

  1. ZenoPageBuilder’s approach: Add CSS code to the base.css file targeting .header-wrapper with properties for width (var(--page-width)) and margin (auto). A screenshot shows the expected result.

  2. YOD_Solutions’ method: Modify the base.css file in the assets folder by changing the max-width property of .page-width.drawer-menu from 100% to var(--page-width).

Both solutions involve editing theme code files and using CSS variables to control header dimensions. The discussion remains open with no confirmation from the original poster about which solution worked or if the issue is resolved.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

How can I change the width of the header to match my website? Any help is greatly appreciated! Website: flammashop.com

Screenshot 2024-01-25 at 8.37.12 PM.png
Screenshot 2024-01-25 at 8.37.12 PM.png1646Ă—458 69.2 KB

2

Hello @flammagreg :waving_hand:

In Shopify Admin, you can go to Edit theme code, open file base.css, and add this code at the bottom

.header-wrapper {
    max-width: var(--page-width);
    margin: auto;
}

The result

Screenshot 2024-01-26 at 08.48.13.png
Screenshot 2024-01-26 at 08.48.13.png2836Ă—508 54.9 KB

Hope that helps.

1 Like
3

Go to “base.css” file in the “assets” folder and change the max-width property of “.page-width.drawer-menu” from “100%” to “var(–page-width)”

.page-width.drawer-menu {
    max-width: var(--page-width);
}
1 Like