Solved

How can I add a border with shadow to my website header?

jtorres
Explorer
66 0 17

Hello, How can I add a border with shadow to the header.

This is my current header: 

Captura de pantalla 2022-07-06 a las 14.21.30.png

This is how I want it to be:

Captura de pantalla 2022-07-06 a las 14.21.45.png

Website link:  https://innovamaxx.co

Thank you very much for your help, in advance!

Accepted Solution (1)
oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

@jtorres ,

Update the CSS.

div#shopify-section-header_9 {
border-bottom: 1px solid #d3c3c3;
box-shadow: 0 11px #8787873d;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 4 (4)

oscprofessional
Shopify Partner
15905 2378 3087

@jtorres ,

div#shopify-section-header_9 {
border: 1px solid #d3c3c3;
box-shadow: 8px 8px 8px 8px #e5caca;
}

 

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
jtorres
Explorer
66 0 17

Hey, @oscprofessional It worked perfectly! Thank you so much for your help and time!

I just wonder if it is possible to only show it on the down border of the header, and not on all 4 borders!

oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

@jtorres ,

Update the CSS.

div#shopify-section-header_9 {
border-bottom: 1px solid #d3c3c3;
box-shadow: 0 11px #8787873d;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
jtorres
Explorer
66 0 17

@oscprofessional Thank you very much for your help and time!