How to change 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 Header background color after scrolling down

You have to use extra custom CSS. In my below example I used a green gradient. But 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)

But If you want to have a transparent header all the time, you should use below CSS code only:

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