Dawn theme - Change shadow of the header to full witdth

Topic summary

A user wants to modify the Dawn theme’s header box-shadow to extend full-width on wide displays, eliminating visible shadow edges on the left and right sides.

Problem: The default header shadow shows edges on wider screens, creating an undesired visual effect.

Solutions Attempted:

  • Initial suggestion involved using media queries to adjust shadow spread for displays wider than 1200px, but this didn’t resolve the issue.
  • Another approach recommended removing horizontal shadows entirely with box-shadow: 0px 3px 0px rgba(0,0,0,0.2).

Working Solution:
Using an inset box-shadow: box-shadow: 0px -10px 10px -10px rgba(0,0,0,0.2) inset applied to the .header class in the theme’s base.css file.

Key Configuration:
The user also needed to adjust the page width setting in Theme Settings > Layout to 1500px to match their desired layout.

Resolution: Issue resolved by combining the inset shadow CSS with proper page width configuration.

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

I would like to adjust the box-shadow of the header to wide displays, so that you don’t see the edges like in picture 1. Does anyone have an idea what I need to change in my code snippet?

.header {
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
      width: 100%;
      margin: 0;
      padding: 0;
    }

Hey @Roxolot

To adjust the box-shadow of the header to wide displays, you can modify the CSS code snippet you provided. Here’s an example of how you can update it:

.header {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 1200px) {
  .header {
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
  }
}

In the above code, we use a media query to target wide displays with a minimum width of 1200px. Within this media query, we update the box-shadow property of the header to a wider shadow with a larger spread value (12px in this example). You can adjust the values as needed to achieve the desired effect.

By applying the box-shadow within the media query, it will only be applied to wide displays, while on smaller screens it will retain the original box-shadow defined outside the media query.

Make sure to add this CSS code to your theme’s CSS file or use a custom CSS option provided by your theme.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

WOuld you like a display like the attached image? or not?

I just want to have the shadow under the box. So it shouldn’t be on the left and right side

Unfortunately, despite the code change, it did not work and the side shadows are still visible on wide displays.

@Roxolot , Update your CSS as below:

.header {
      box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2);
      width: 100%;
      margin: 0;
      padding: 0;
    }

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.header {
   box-shadow: inset 0px -10px 10px -10px rgba(0, 0, 0, 0.2);
  max-width: 100%;
  margin: 0;
  padding: 0;
}

1 Like

That worked, but I made the mistake of setting the wrong page width in the Theme Settings under Layout. The solution is to set the code and the page width to 1500px.