Dawn theme - Change shadow of the header to full witdth

Store Design
,

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.
1

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;
    }

Picture_1.png
Picture_1.png1898×210 14 KB

2

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

3

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

4

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

5

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

6

@Roxolot , Update your CSS as below:

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

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;
}

ZestardTech_0-1685951745976.png
ZestardTech_0-1685951745976.png1907×583 152 KB

1 Like
8

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.