Dawn theme - Change shadow of the header to full witdth

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.