[Support request] Gradient colors for the header and footer

[Michelle]

Hi there!

I saw that the primary and the secondary navigations could be altered to be gradient. It worked swimmingly using the CCS and the https://cssgradient.io/ site. I want to do the same for the header and footer and though that by using the same code as for the navigation would work but didn’t. Am I missing something?

Here’s the navigation code:

.main-navigation {
background: linear-gradient(90deg, rgba(31,64,137,1) 0%, rgba(8,9,15,1) 83%, rgba(6,7,12,1) 100%);}

Thank you for your help

[Elvin]

Hi,

Can you link us to the site in question? So we could check which selector to be used in your case.

You can add it on the Private information text area. Thank you. 🙂

[Michelle]

Hi. Added the link in the private box.

[Elvin]

Try using header.site-header instead of .main-navigation as your selector.

To clarify: Are you trying to match the background gradient to the color of the logo?

If so, you may come across issues with having non-smooth gradient color transition between the background and the logo.

That said, if possible, consider adding an logo with transparent background. 🙂

[Author]

Posts