Main menu gradient?

Hi,

Instead of having the background of the main menu just one single color, is there a way (CSS?) to make it gradient looking? Like the examples over here? http://goo.gl/8DhV3g

Should be possible using custom CSS I would say. But how?

Please advise.

Thank you!

Or maybe there is an option to choose your own background image as a background for the main menu? That would also solve the problem.

Please help, thanks 🙂

• This reply was modified 11 years by OuweAap.

This looks like it might be very handy:

http://www.colorzilla.com/gradient-editor/

The element to style is td-menu-wrap, I believe (which seems to be the one that gets the colour you set in the theme panel).

Hi TheMediumUTM,

Thanks for the response.

Unfortunately, CSS is not my expertise.

Do you have any idea what custom CSS code I would have to use? How would it look like?

Thanks in advance 🙂

The link I shared generates all the hard part of the CSS based on the gradient you make there. Once you make the gradient you want:

1. Go to your Theme Panel -> Custom CSS

2. Enter .td-menu-wrap { on a new line

3. Copy and paste all the CSS code generated by that site

4. Enter } on one more new line

5. Delete your cache if you use one and refresh page.

If this doesn’t work, the implementation will be more difficult and you’d probably have to wait for tagDiv support after the weekend.

Good luck!

Hi Guys,

Thanks for the replies.

Ok, I got it to work using this custom css:

.td-menu-wrap {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfe7fa), color-stop(100%,#6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%,#6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%,#6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%,#6393c1 100%);
background: linear-gradient(to bottom, #cfe7fa 0%,#6393c1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#cfe7fa’, endColorstr=’#6393c1′,GradientType=0 ); }

Unfortunately, the gradient code ONLY works when I disable the Site Background completely.

And I AM using my own site background. So it seems like it’s one (gradient menu but no site background) or the other (no gradient menu but with site background).

TagDiv support: why is this, and what is the fix for this?

In short: I just want some more gradient color in my main menu. I figured out the code, but this code does NOT want to work when I use site background. How.To.Solve?

Thanks 🙂

• This reply was modified 11 years by OuweAap.
• This reply was modified 11 years by OuweAap.

Does it have something to do with .td-boxed-layout maybe?

Interesting problem! Glad you got it working as far as you did. I think Lucian will have to be the one who figures out why it doesn’t work with site background. :p