Gradient Menu

adamsaid

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

adamsaid

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

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

Can you send it again, please?

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

adamsaid

Hi,

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

http://homewarmth.uk/services/

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next