Site logo

Archived topic

Gradient color for main menu. . . .

7 replies · Started by Robert Holland on October 13, 2021

Viewing posts 1–8 of 8

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

This archived topic is closed to new replies.