Evolve Theme Update – Navigation menu all messed up

have you made modifications regarding menu in theme files or child theme?

Yes i have made modification in the child theme only. All modifications were made in color only.

I have checked in firebug (firefox) following class is adding background image which is overlaying the menu gradient color

.menu-header, body #header.sticky-header.sticky {

background: url(https://www.honkhomes.org/wp-content/themes/evolve/library/media/images/trans.png) 0px -10px repeat-x,-webkit-gradient(linear,left top,left bottom,color-stop(.2, #25686F),color-stop(1, #1a494e)) !important;

if you make it as

background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #25686F),color-stop(1, #1a494e)) !important;

Modify in child theme stylesheet only.

I am assuming you are referencing two classes .menu-header and body #header.sticky-header.sticky

I tried the changes and nothing changed.Not sure what to replace here since my stylesheet code does not look at all like what you reference after the code background:

so what do I change? Thank you for your expertise.

here is my .menu-header code

.menu-header {
background: #f5f5f5;
background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -moz-linear-gradient(center top, #F8F8F8 20%, #eeeeee 100%);
background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(.2, #f8f8f8), color-stop(1, #eeeeee)) !important;
background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -o-linear-gradient(top, #f8f8f8, #eeeeee) !important;

here is my body #header.sticky-header.sticky code

body #header.sticky-header.sticky{display: block;}

Hi rustybird,

As codemovement.pk said it looks like that background image (trans.png) is causing the issue. Try removing all of the references to it but keeping all the CSS gradients (with all the browser prefixes). So your .menu-header styles would look like this:

.menu-header {
  background: #f5f5f5;
  background: -moz-linear-gradient(center top, #F8F8F8 20%, #eeeeee 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #f8f8f8), color-stop(1, #eeeeee)) !important;
  background: -o-linear-gradient(top, #f8f8f8, #eeeeee) !important;
}

Hopefully that does the trick. Let us know if not.

I made changes as you suggested and removed all references to trans.png still have the same issue. Is there something I am missing?

Thank you

here is the code for the.menu-header

.menu-header {
background: #f5f5f5;
background: -moz-linear-gradient(center top, #F8F8F8 20%, #eeeeee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #f8f8f8), color-stop(1, #eeeeee)) !important;
background: -o-linear-gradient(top, #f8f8f8, #eeeeee) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f8f8f8′, endColorstr=’#eeeeee’);
border-color: #e0dddd;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
color: #777;
font-size: 14px;
line-height:18px;
text-shadow: 0 1px 0 #FFFFFF;
float:left;display:block;width:100%;
}

I installed Evolve quick to test things out. It looks like you can turn off the background gradient on the menu (I think this is overriding your style.css styles).

Go to Customize > Styling > Menu and check the disable background gradient. Hopefully that will allow your other styles to show through.

And on that note, I think I gave you the wrong gradient colors. Try this:

.menu-header {
  background: #25686F;
  background: -moz-linear-gradient(center top , #25686F 20%, #1a494e 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #25686F),color-stop(1, #1a494e));
  background: -o-linear-gradient(top, #25686F,#1a494e);
  progid:DXImageTransform.Microsoft.gradient(startColorstr='#25686F', endColorstr='#1a494e');
  background-color: #1a494e;
}

I don’t think you’ll need the !important anymore, but you can always throw them back in if necessary. Here’s hoping!

I tried the above code and still no change. I think you are correct that the Customize option is overriding my style.css.

The menu now appears with no gradient by disabling the background gradient option. This will work for now but sure would like it the way it was.

Thank you for your expertise.

Hmm… it looks like some others are having this same issue. Might be worth keeping an eye on that thread. Perhaps the developers will provide a fix.

It looks you have resolved the issue. If you like please post the solution how you resolved and make this post as resolved in case if it is fixed.

The issue is not resolved. A temporary fix is to disable the menu background in the Custom, Styling menu. This results in a flat menu with no hover.