Adding CSS Gradient Background from gradient generator.

Solved
Gerius
Tourist
20 0 1

GTory

0 Likes
KYG
New Member
3 0 0

Hello there what if I want to make a gradient color for background of the main menu? Could you please help me with the code?


@Jasoliya wrote:

Hi,

You can change background color of home and product page by following:

Add this in theme.liquid

 

{% if template contains 'index' or template contains 'product' %}
<style>
  body{background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);}
</style>
{% endif %}

You can change change color like this for search and add to cart button by adding css in theme.scss

 

Let me know if you need help.


 

0 Likes
Jasoliya
Shopify Expert
4120 569 997

Hi @KYG 

You can add gradient color in background by this css:

#your_menu_id{  background-image: linear-gradient(red, yellow, green);}

You have to change id base on your menu code. you can also change color 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
KYG
New Member
3 0 0
How can I add bottom-border 1 px to the navigation menu? My header and body
are white and when I scroll down I can't distinguish them?
0 Likes
Jasoliya
Shopify Expert
4120 569 997

Send your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
AlohaAmerica20
New Member
3 0 0

I followed the directions and I went from a dull grey background to a beautiful Gradient!!! Thank you so much Jasoliya! You are very much appreciated!

Let me know what you think of it!

LINK BELOW

www.alohaamerica.us

0 Likes
Jasoliya
Shopify Expert
4120 569 997

Its looking good now what do  you want to do? 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
AlohaAmerica20
New Member
3 0 0

I would like to test some different color gradients I think!

Would I make those changes via the HTML theme.liquid code? or in the css.liquid file?

0 Likes
Jasoliya
Shopify Expert
4120 569 997

yes you can chaneg css here that only work for home page:

{% if template contains 'index' or template contains 'product' %}
<style>
  body{background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);}
</style>
{% endif %}

You can get color from this site 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
AlohaAmerica20
New Member
3 0 0

Thank You, You are very helpful! Have A Wonderful Day & Happy Thanksgiving!

0 Likes