How to Change the Color of Off-Canvas Mobile Menu Items

You have to use extra custom CSS:

.offcanvas-menu a {color: white !important;}
.offcanvas-menu a:active,
.offcanvas-menu a:hover {color: yellow !important;}

OR

.offcanvas-menu .offcanvas-inner .sp-module ul > li a, 
.offcanvas-menu .offcanvas-inner .sp-module ul > li span {color: white;}
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:active,
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover {color:yellow}

How to Change the Header Background Color After Scrolling Down

You have to use some custom CSS to achieve this effect. In the example given below, we have used a green gradient. You can use solid colors as well.

.helix-ultimate #sp-header.header-sticky {
    background-color: #1ABDA2;
    background-image: linear-gradient(131deg,#4AE3A6 0%,#1ABDA2 100%) !important;} 

Final effect (green colors):

However, if you want to have a transparent header all the time, you should exclusively use the CSS code provided below:

.helix-ultimate #sp-header.header-stticky {
  background: transparent !important;
  background-image: none !important;}