How can put a gradient in the nav bar?

Elixir Stacks
1

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.
Frederic

2

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.

3

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 http://mtx.ma
The gradient goes from RGB 0,0,162 to RGB 0,0,222
Best regards…
Long Live Rapidweaver :wink:

4

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+ */
}
3 Likes
5

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