Hello, can someone please help me to put shadowing under the header?
url: https://errival.com/products/errival%E2%84%A2-mini-rubber-band-shotgun
Like this:
Topic summary
A user seeks help adding a shadow effect below their Shopify store header at errival.com.
Proposed Solutions:
Two contributors provided CSS code snippets to achieve the shadow:
- One suggests adding box-shadow properties to
.headerin the base.css file - Another recommends targeting
.header-wrapperwith similar shadow styling
Implementation Issues:
The original poster reports the CSS solutions aren’t working. A screenshot reveals potential CSS syntax errors in their implementation.
Current Status:
Contributors suggest the CSS file may be broken due to incorrect code placement. Alternative approaches are proposed:
- Adding the CSS via theme editor markup instead of base.css
- Inserting code before the
</body>tag in liquid files
The discussion remains ongoing as the user works to properly implement the shadow effect without breaking existing styles.
Hello @Ryan1998 ,
Follow these steps:
-
Go to Online Store → Theme → Edit code
-
Open your base.css file and paste the following code at the bottom:
header.header {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 16px 0 rgba(0, 0, 0, 0.19);
}
Thanks
1 Like
add this css on base.css file
.header-wrapper {
background-color: rgb(var(–color-background));
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 6px 14px -14px black;
}
1 Like
Thanks for reply, doesn’t seem to be working though 
Thanks for reply, doesn’t seem to be working though
i think its your mistak… where this css put in your store
1 Like
Seems you break the css file that’s why its not working.
try this edit theme.liquid search for and just before of it add this code
1 Like
yes 
body .header-wrapper {
background-color: rgb(var(–color-background));
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 6px 14px -14px black;
}
1 Like