Gradient of menu bar

I completely agree. The change after the new theme update really messed up the colors and the differences in the colors and gradient are not good.

Did anyone figure out if this menu coloring and gradient can be changed beside just turning it off?

I had entered a bunch of custom CSS to make things work in the older theme version and had to remove it all as it made the new theme crazy.

I am having the same problem. Will stay tuned.

I’ve been doing a little testing on this theme and I think maybe checking both the “Transparent” box and the “Disable menu background…” box (in Customize > Styling > Menu) will allow your custom styles (in style.css) to show through. At least this is working for me on my tests.

If you’re not adding custom CSS gradients in your style.css file (katemegill) I believe the theme developer would have to add this feature. Maybe I’m missing it but this doesn’t seem to be built into the theme options.

Technical explanation:

If turning on ‘transparent’ let’s your custom gradients show up like it did for me it’s because there’s a bug in the theme where that checkbox is adding a background color of #ransparent which is invalid CSS. This bug allows your custom styles to work. If this is ever fixed the custom styles won’t work anymore.

I could be all wet on this but this is my current theory of what’s happening. ?? Perhaps the developer can either add a top/bottom color option to make your own menu gradients or remove the !important’s on all the background attributes so custom styles can take precedence.

Whew! Hopefully that makes sense and is helpful.

Checking the “Transparent” box and the “Disable menu background…” box is not fixing the issue in Internet Explorer for me. But it is working in Safari, FireFox, and Chrome.

I have the same menu bar problem after updading, the smooth gradient transition is no longer there. The top color fades OK to a lighter color but the bottom color has no gradient.
Just wondering if the author might provide a solution if he reads this

I also found the “gradient” too much like just 2 colors with no gradient. Played around for several hours, and this is working for me:

/********** Decrease menu container height, smooth out gradients ************/
#search-text-box, .menu-header {
/* Permalink – use to edit and share this gradient:
https://colorzilla.com/gradient-editor/#e1e1e1+0,ececec+46,d4d4d4+71,d4d4d4+71,c7c7c7+94,d9d9d9+100 */
background: #e1e1e1 !important; /* Old browsers */
background: -moz-linear-gradient(top, #e1e1e1 0%, #ececec 46%, #d4d4d4 71%, #d4d4d4 71%, #c7c7c7 94%,
#d9d9d9 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e1e1e1 0%,#ececec 46%,#d4d4d4 71%,#d4d4d4 71%,#c7c7c7 94%,
#d9d9d9 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e1e1e1 0%,#ececec 46%,#d4d4d4 71%,#d4d4d4 71%,#c7c7c7 94%,
#d9d9d9 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e1e1e1′,
endColorstr=’#d9d9d9′,GradientType=0 ) !important; /* IE6-9 */
}

/************** Reverse the gradient for the active page menu item ********************/
.menu-item.menu-item-type-post_type.menu-item-object-page.current-menu-item.page_item,
.current-menu-item {
/* Permalink – use to edit and share this gradient:
https://colorzilla.com/gradient-editor/#d9d9d9+0,c7c7c7+6,d4d4d4+29,d4d4d4+29,ececec+54,e1e1e1+100 */
background: #d9d9d9; /* Old browsers */
background: -moz-linear-gradient(top, #d9d9d9 0%, #c7c7c7 6%, #d4d4d4 29%, #d4d4d4 29%,
#ececec 54%, #e1e1e1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #d9d9d9 0%,#c7c7c7 6%,#d4d4d4 29%,#d4d4d4 29%,
#ececec 54%,#e1e1e1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #d9d9d9 0%,#c7c7c7 6%,#d4d4d4 29%,#d4d4d4 29%,
#ececec 54%,#e1e1e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d9d9d9′,
endColorstr=’#e1e1e1′,GradientType=0 ); /* IE6-9 */
}
/*********************** Done styling menu bar ***************************************/

i also see that the options given are not working properly….. i click that no display of page title on page, but still its showing on the page, did several times enabling and disabling , but it is simply not working ???????

Hello,
Hope you all are well.

Please, one of you post a site link here so I can take a look.

Thanks.

Aisha is going to have to post; I worked around things by messing with the css (JetPack’s “Edit CSS”.

You can see my current (work in progress) site here; css is as above.

Hello,
I don’t understand what is wrong. It looks like a normal site menu to me.

Thanks.

Yes, it looks normal because I overrode the theme css. If you had had a chance to look at things 5 days ago, there would have been no gradient; the menu bar looked like a light stripe with a dark stripe under it. I can take the css off for an hour or so if that would help.

No, I would like to see someone’s site that is messed up. I don’t want you to mess yours up just for an example.

Not a problem, I just made a backup of the css file then commented out my custom css for the menu bar gradient.

Here’s the site: https://wp.interiorhorsecouncil.com/

That is way above my head, maybe theme author can help.

It was really nice of you to try to help. You can look at the css gradient code above, it worked well for me. The permalink site has a nice tool where you can visualize all sorts of gradients and it will generate the code for you.