fading logo

Hi Malithka!

The script written to change the opacity (fadeIn/fadeOut) includes the class header_section. For a quick test, you can change the section in the stylesheet (css/default.css) from:

.header_section{
  background-color:#5C4B51;
  color:#fff;
  opacity:0.6;
}

to:

.header_section{
  background-color:#5C4B51;
  color:#fff;
  opacity:1;
}

From there you can remove the jQuery function which adds/removes the class fd. This class controls the fadeIn/fadeOut.

So this in js/enigma-theme-script.js:

//Fade Up Menu
jQuery(window).scroll(function() {
// 100 = The point you would like to fade the nav in.
  if (jQuery(window).scrollTop() > 100 ){
    jQuery('.navigation_menu').addClass('nd');
    jQuery('.header_section').addClass('fd');
  } else {
    jQuery('.navigation_menu').removeClass('nd');
    jQuery('.header_section').removeClass('fd');
  };
});

Becomes:

//Fade Up Menu
jQuery(window).scroll(function() {
// 100 = The point you would like to fade the nav in.
  if (jQuery(window).scrollTop() > 100 ){
    jQuery('.navigation_menu').addClass('nd');
    //jQuery('.header_section').addClass('fd');
  } else {
    jQuery('.navigation_menu').removeClass('nd');
    //jQuery('.header_section').removeClass('fd');
  };
});

All we have done is commented out the addClass/removeClass for the class header_section

TTtytan

it is help from wizaeds like you that make the WordPress such a pleasure to dabble in….
Thank you for your help it worked like a dream.

Many MANY thanks

Hi @tttytan,

Thanks for Help.

Thanks.

Hi TTtytan

please confirm the java script code for me as it seems to be identical? Or am I missing something.. keeping in mind I am no pro…
Would it be possible to still allow the menu bar to be opaque but go solid when scrolling. What is happening now is that the button text is mixing with the pages.
Again much thanks.

Regards

Hi,

Please not make any changes to theme’s core files.

Please go to Admin Dashboard >>Appearance >>Customize >>Theme Options >>General Settings and find Custom CSS editor.

Now copy below CSS in custom CSS editor

.header_section{
  opacity:1 !important;
}

Save the changes.

Thanks.

Thank you very much Weblizar
That worked but on home page but unfortunately on subsequent pages https://vertiblindkzn.co.za/wp1/sample-page
the writing is still visible till scrolling. If I have to live with it I can but if there is a way to get around it I would appreciate it… Again thanx for the help!

Regards

Hi,

Please add below CSS in Custom CSS editor.

.navigation_menu {
 background-color: #fff !important;
}

Save the changes.

Thanks

Hi,

As someone new to WordPress and somewhat new to forums, I am actually very impressed with the level of support offered by the senior wp guru’s. It is guys like you that makes WordPress a pleasure… Thank you.
Now as to my previous problem… I commented out breadcrumbs so it was not visible… This way I still get the fade at the top but solid when scrolling. Do you envisage any problems with this?
My next test is to get the left and right of logo to fade… still trying a few things.

Regards

Hi,

Please not make any changes in Theme’s core files. You will lost them on update.

Please use below CSS in Custom CSS editor

.navigation_menu {
  opacity: 1 !important;
}
.header_section{
  opacity:1 !important;
}

And please remove from Custom CSS editor.

.header_section{
  opacity:0.9 !important;
}

Thanks.