What's your biggest current challenge? Have your say in Community Polls along the right column.

How can I add a gradient to my website's header and footer?

Solved

How can I add a gradient to my website's header and footer?

GustavoAlves
Excursionist
37 0 2

Does anyone know how I can put the header background with a gradient? If possible talk to me with Header and Footer. I would really appreciate it, I've tried several ways and none of them worked.
If you want to see the website: www.colorluzes.com.br

 

GustavoAlves_0-1671305397258.png

 

Accepted Solution (1)

ZestardTech
Shopify Partner
5912 1067 1413

This is an accepted solution.

Hello there,

 

1. In your Shopify Admin go to online store > themes > actions > edit code

2. Find Asset >theme.css and paste this at the bottom of the file:

header.header.header--inline.header--search-expanded {
    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)!important;
}
nav.nav-bar {
    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)!important;
}
footer.footer {
    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Reply 1 (1)

ZestardTech
Shopify Partner
5912 1067 1413

This is an accepted solution.

Hello there,

 

1. In your Shopify Admin go to online store > themes > actions > edit code

2. Find Asset >theme.css and paste this at the bottom of the file:

header.header.header--inline.header--search-expanded {
    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)!important;
}
nav.nav-bar {
    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)!important;
}
footer.footer {
    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing