Docs

[Michael G]

My url is: http://demolawfirm.peedeewebsites.com/

I’m trying to improve on my color scheme, so I’d like to do a color gradient background that starts at the top of the home page topbar and extend it down through the header and navbar. I saw this used on another site and I really liked it. I’d like to use a similar look on my site. On that site, the topbar, header and navbar were all in one div. I checked it with the inspect element tool and discovered that they achieved their color gradient by applying the following code to that div:
background: linear-gradient(to bottom, #222224 0%, #4C5C75 100%) repeat scroll 0% 0% transparent;
I’ve never worked with color gradients before, but by also using the inspect element tool, I was able to insert that code and change my own topbar, OR my header, OR my navbar, but I couldn’t figure out how to apply it so that it encompassed them ALL as a group. I may want to use this on other areas of my site as well, if I can learn how it’s done. Can you enlighten me on how to apply a color gradient, as a whole, to these seperate but adjoining areas?

Thanks as always for the great support,
Michael

[Aman]

Hi Michael,

You could have to individually apply them to all the elements you want the background on. So to start with if you wanted to have it on the whole header part, you’d have to apply it x-topbar, x-logobar and x-navbar with this Custom CSS Code to be added in Customizer > Custom > CSS:

.x-topbar,.x-logobar,.x-navbar{
 background: linear-gradient(to bottom, #222224 0%, #4C5C75 100%) repeat scroll 0% 0% transparent;
}

You’ll similarly have to add it to all the elements you want to set this background to.

Thanks!

[Michael G]

Thank for the assistance. I entered the code, but it did not produce the desired effect. This starts a new gradient within each element. What I’d prefer is to have the gradient begin at the very top of the page and extend down to the bottom of the navbar. Did I leave out a step, or is that not possible with this theme?

Thanks,
Michael

[Aman]

Hi Michael,

Please add this too in Customizer > Custom > CSS:

.x-topbar, .x-logobar, .x-navbar{
background:transparent !important;
}

.x-colophon.bottom{
background:transparent !important;
}

Hope that helps.

Thanks!

[Author]

Posts