Add background color on scroll, using transparent mobile header 7.0

Site URL: https://fridleycustomhomes.squarespace.com/

I found some code to make my mobile header transparent, but now the header content is overlapping my other content on the page when scrolling. I would like to either 1) stick the transparent mobile header to the top of the site, or 2) show a header background color upon scrolling down the page - on mobile only. Can someone help?

Website: fridleycustomhomes.squarespace.com

Password: fridley

Current CSS I'm using: 

/* Mobile header transparent */
@media screen and (max-width:640px) {
body .Mobile-bar.Mobile-bar--top {
    background-color: transparent;
      position: fixed!important;
}
body.homepage {
    margin-top: 0 !important;
}
}

/* Chane mobile hamburger icon */
button.Mobile-bar-menu {
    visibility: hidden;
}
button.Mobile-bar-menu:after {
    visibility: visible;
    content: "MENU";
    font-family: futura-pt;
    color: #343234;
    font-size: 15px;
      letter-spacing: 0.1em;
  
/* Change mobile hamburger icon color on index page */
}
body.homepage button.Mobile-bar-menu:after {
    color: white;
}

/* TEST --- menu header fixed */
.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

Hi,

Which plan  do/will you use? Each plan will need a different code