Gradient of menu bar

My site is https://www.nq-international.com .. before everything was great. The gradient and page titles etc even the featured image is showing on the page … i tried disabling from theme but didnt work ?? my audio icons have gone too small automatically. …

How can i save my website from getting these sudden changes during updates …

Hi Aisha,

Most of the time you should be able to set up a child theme. The child theme consists of 2 files, functions.php and style.css that are loaded after any of the regular theme files. So anything you fix or customize in a child theme, should not be affected by updates of the parent.

If all you need is style changes, you can also use JetPack’s “Edit CSS”, which apparently has the style.css without the functions.php of a full child theme.

Some people copy the entire *.css file of the parent into a child style.css, so their look never changes. I haven’t done that so the recent Evolve theme update messed up my menu.

At this point, you could
1) Find an older copy of the Evolve theme and upload that

or

2) Keep the update and use a browser (Chrome & Firefox have this) to track down the css element to restyle your menu. On your webpage, right click on any element and choose “inspect” from the right mouse menu.

What that yielded me — after banging my head against the wall for several hours since I didn’t know css as well as I thought, was the code I posted above.

The css elements that seem to have been affected by the gradient theme change were:

#search-text-box, .menu-header {
}

and

.menu-item.menu-item-type-post_type.menu-item-object-page.current-menu-item.page_item,
.current-menu-item {
}

If you click on the permalink in the code I posted, it will take you to a website that helps you choose colors for the gradient that you want.

You should also try FieldDraft’s solution and see if that works for you.

Good luck!

I have read all the above posts and unfortunately most of this is above my skillset. I have used a temporary fix is to disable the menu background in the Custom, Styling menu. This results in a flat menu with no hover.

So now the mobile display of the website does not show the menu at all. Any help appreciated. I am very unhappy with this evolve update and so is my client.

Hi rustybird,

Try this:

Install jetpack, or if it’s installed already, enable “Custom CSS”. Copy the css in my example above to the Custom CSS file, then save / update. Refresh your page and see how it looks.

My menu bar is gray, but if you click on the link in the code example above, it will take you to a page where you can create a gradient visually in whatever colors you like, and it will generate the cross-browser css code for you.

The “Custom CSS” jetpack plugin, acts like a half-child theme in that it loads after and over-rides any conflicting theme css. So it will style the menu and any theme updates will not affect it, because it’s loaded after the theme.

Code repeated here, I didn’t see suggestion to put in between backticks before:

/********** 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 ***************************************/

Darth:

Thank you for your reply. I have installed jetpack and pasted the code and changed the gradient colors (not exact yet). The menu has a gradient but now the background on a selected button is black and the dropdowns are white(cannot see the text). Also the menu does not show up on the mobile version. my site https://www.honkhomes.org. Did I miss something?

Hi rustybird,

I have some other menu code besides the gradients, not sure if any will help with your disappearing menus but I had the same problem after the theme upgrade:

/**********************  Style the menu bar ***************************/
.menu-container {
    background: #e1e1e1;
    padding-bottom: 0 !important;
}

/*  Decrease menu text height a little and it will center vertically  */
ul.nav-menu a {
     height: 2.8em!important;
     line-height: 2.6em!important;
     margin-top:  -5px;
}

.menu-header {
    height: 2.8em!important;
    display: inline-block;
}

.nacked-menu {
    padding: 0 0;
    margin-left: 20px;
    margin-right: 20px;
}

to fix the bootstrap slider more like it was before, you can check this thread:

To change button colors back, go to “Theme Options”->”Shortcodes”->”Buttons” and change them there. Apparently you have to have the recommended reduxframework plugin installed. And, it makes no sense to me that the option is under “shortcodes” but maybe I’m missing something.

I really like your site, by the way. What are you using for your facebook plugin connector?

Tater