Gradient Menu

adamsaid · January 2021

Hi there,

I am trying to change the colour of the sticky header to a gradient, I am using this code below;

#Top_bar .is-sticky { background: linear-gradient(90deg, rgba(240,1,77,1) 0%, rgba(119,2,101,1) 58%);}

When I delete the .is-sticky the main background has the gradient but when you scroll down to show the sticky header, it goes back to the default colour set.

Any information to fix this would be greatly appreciated.

Phil · January 2021

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.

It is always a good idea to also attach a screenshot

thanks

adamsaid · January 2021

Hi,

Thank you for the reply, the website is under construction but have made one page public which can be found here:

http://homewarmth.uk/homepage

I have attached a screenshot of the header I am trying to make a gradient using the code in the first post, I'll attach it here too:

#Top_bar .is-sticky { background: linear-gradient(90deg, rgba(240,1,77,1) 0%, rgba(119,2,101,1) 58%);}

I have tried to use a background image and in the theme options I have selected use the same background, but it reverts to a solid colour again.

Thanks

Phil · January 2021

Sorry, but the link you have sent is not working.

Can you send it again, please?

Thanks

adamsaid · January 2021

Hi,

I have just published another page and tested on a different browser and it's working.

http://homewarmth.uk/services/

Phil · January 2021

Please, try to use the following Custom CSS Code instead.

div#Top_bar.is-sticky {   
 background: linear-gradient(90deg, #F0014D 0%, #770265 58%)!important;
}

Thanks

Gradient Menu

Comments