Archived topic
Gradient color for main menu. . . .
7 replies · Started by Robert Holland on October 13, 2021
Would like to have color gradient for main menu. . . .
Hi Robert,
CSS will be require to do so.
Usually you can try something like this:
.main-navigation {
your-gradient-code-here;
}
Your explanation seems nice, but it seems like an example without any gradient code.
Where would I find code for the actual gradient?
Don't you folks have some code for a gradient.
If you google background gradient CSS you'll find a lot of info.
This question is not theme related, but pure CSS.
Anyway I googled for you this time, here you go, try this one :)
https://cssgradient.io/
Ying, I did search. But if you don't know the right question to ask, it's hard to find the right answer.
Many gratitudes. . . .
Haha that's true :P
You are welcome and hope it works well!
Ying, I pasted this into the Additional CSS area on my site, and it looks great. Now I need to get up to speed on using this for my header and Site Title area.
.main-navigation {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
What would be the change to the snippet to apply it to my main header? Maybe:
.header {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
goto http://www.AuthorRobertHolland.com
More gratitudes. . . .
Did you paste some thing like this to customizer > additional CSS?
.main-navigation {
background: radial-gradient(circle, rgba(238,108,77,1) 0%, rgba(85,85,85,1) 100%);
}
Then the gradient will show up on your primary menu area, like this:
https://www.screencast.com/t/6eenbWkW