[Resolved] How to create color gradient for Primary and Secondary Menu

[Chitika]

I am able to change the colors of the menu easily.
But how to provide gradient colors for both primary and secondary navigation.

[David]

Hi there,

you can use some CSS like this:

.main-navigation {
    background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
}
.secondary-navigation {
    background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
}

You can use this site to generate the Gradient CSS:

https://cssgradient.io

[Chitika]

Thanks @David. It worked on desktop sites.
But on mobile or responsive theme, I don’t see the change.
Why?

[David]

The Mobile navigation has got the gradient, do you want the drop down menu to also display the gradient ?

If so you would use this as well:

.main-navigation.toggled .main-nav>ul {
    /* Your gradient CSS here */
}

[Chitika]

Probably the cache was stopping to see it on my end.
Yes, I see it on another mobile. The mobile menus are also having color gradient.
Thanks. Make it resolved.

[David]

Glad to hear that!

[Author]

Posts