How can put a gradient in the nav bar?

Hi Stackers,

I tried to use “Backdrop” to put a gradient at the background of “Nav.Bar”, but when I use “Sticky Navigation” (the Nav.Bar stays at the top of the browser when you scroll down), the “Backdrop” gradient moves and disappears when I scroll down. Only the “Nav.Bar” remain in place…

Do you have any solution to put a gradient in the “Nav.Bar” ?

Thank you.

I don’t think there is anything build into Nav. Bar that will put a gradient on it.

This could be done with CSS. Do you have a link to a test page so we can work out the correct CSS? It would also help if you include the Backdrop so we can see the gradient you want used.

Hello DLH,
Thanks for your answer.
I knew the solution was a CSS, but I you might imagine, have no clue how to do it :slight_smile: :slight_smile: :slight_smile:
Please visit
The gradient goes from RGB 0,0,162 to RGB 0,0,222
Best regards…
Long Live Rapidweaver :wink:

Add this to your site-wide CSS code area. You also can remove the Backdrop stack.

/* Navigation Bar - Gradient */
.navigation_bar {
	background: rgba(143, 0, 2, 1.00); /* fallback for old browsers */
	background: -webkit-linear-gradient(0deg, rgba(143, 0, 2, 1.00) , #rgba(211, 0, 5, 1.00)); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(0deg, rgba(143, 0, 2, 1.00) , rgba(211, 0, 5, 1.00)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

Hello DLH, this is lovely. Thank a lot :slight_smile: