kaaathylynn

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; }