Header encroaching on page title in mobile view

Site URL: https://www.cathuddhistbuddhatholic.com/

This code is working fine on the desktop to move my page titles down so the navigation bar won't encroach on them, but it is not working in mobile view.  

.view-list .banner-thumbnail-wrapper,
.collection-type-page .banner-thumbnail-wrapper,
.collection-type-index .banner-thumbnail-wrapper {
 margin-top: 100px !important; /* nav bar height */
}

Please advise.  Thanks!
Jenée

Remove above code & this code

header#header {
    position: fixed !important;
}

Add this code

/* fixed header */
header#header {
    position: sticky;
    position: -webkit-sticky;
}

You are the absolute best, @tuanphan.  Thank you!