Top Menu assistance

Hi.
I was hoping to get some assistance with the colours of the top menu.
Id like it to stay as it is before I start scrolling at the top of the page, but when I scroll I’d like it to be bordered and fill in white.

The CSS on the page is pasted below.

Your assistance is most appreciated.

.menu-overlay.active + #site-header.fixed.shrink {
		background:  rgba(255, 255, 255, 0.95);
	}
	.vc_custom_heading.title-our,
	h3.vc_custom_heading,
	h4.vc_custom_heading{
		font-family: \'IBM Plex Serif\' !important;
	}
	h4.vc_custom_heading {
		letter-spacing: 3.24px;
	}
	h3.vc_custom_heading{
		letter-spacing: 5.76px;
	}
li#menu-item-25365 {
    pointer-events: none;
}
	.page-custom-title .custom-title-excerpt{
		letter-spacing: 5.76px;
	}
	.page-custom-title .title-xlarge,
	.page-custom-title .title-xlarge span{
		text-transform: uppercase;
	}
	.page-custom-title.portfolio .custom-title-background{
		height: 100vh;
	}
	.page-custom-title.portfolio  .not-full-height .custom-title-background{
		height: auto !important;
	}
	.page-custom-title.portfolio .custom-title-background .fullwidth-block-inner {
		position: absolute;
                width: 90%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.page-custom-title.portfolio .title-xlarge{
		font-size: 80px;
		line-height: 90px;
		letter-spacing:  10px;
	}
	.custom-line {
		position: relative;
	}
	.custom-line .title-h2:before {
		content: \'\';
		width: 80px;
		height: 2px;
		background-color: #e5bf93;
		display: inline-block;
		float: left;
		vertical-align: bottom;
		position: absolute;
		bottom: 14px;
		left: 0px;
	}
	.custom-line  .title-h2 {
		padding-left: 85px;
	}
	.comment-reply-title:before {
		content: \'\';
		border-bottom: 2px solid #e5bf93;
		display: inline-block;
		height: 40px;
		width: 80px;
	}
	#reply-title * {
		text-transform: uppercase;
	}
	.wpb-js-composer .vc_tta.vc_tta-color-thegem.vc_tta-style-simple_solid .vc_tta-controls-icon::before,
	.wpb-js-composer .vc_tta.vc_tta-color-thegem.vc_tta-style-simple_solid .vc_tta-controls-icon::after {
		border-color: #b6b6b6;
		color: #b6b6b6;
	}
	.wpb-js-composer .vc_tta.vc_general.vc_tta-accordion.vc_tta-style-simple_solid .vc_tta-panel + .vc_tta-panel {
		border-top: 1px solid #eaeaea;
	}
	
	body .gem-team-style-6 .team-person-image {
		margin-bottom: 0;
	}
	.custom-qf-title .quickfinder.quickfinder-title-thin .quickfinder-item-title {
		max-width: 253px;
	}
	.custom-qf-title .quickfinder-box-style-solid .quickfinder-item-box {
		position: relative;
		padding: 18px;
		padding-bottom: 20px;
	}

	.version-new.news-grid.hover-new-zooming-blur .portfolio-item .image .links .caption .title * {
		font-weight: 100;
	}

       body.search .page-title-block .highlight {
               color: #e5bf93;
       }

	@media (max-width: 1199px){
		.wpb_row, .wpb_row > *,
		.row, .row > * {
			margin-top: 0 !important;
		}
		.comment-form-fields > * {
			margin-bottom: 1.1em !important;
		}
		.comment-form .gem-button{
			margin: 0 !important;
		}
		#footer-nav .row {
			margin-top: -3em !important;
		}
		#footer-nav  .row > *{
			margin-top:  3em !important;
		}
	}
	
	@media (max-width: 992px){
		.sidebar{
			margin-top: 3em !important;
		}
	}

	@media (max-width: 767px) {
		.comment-reply-title:before {
			height: 25px;
		}
		.page-custom-title.portfolio .title-xlarge{
			font-size: 50px;
			line-height: 60px;
			letter-spacing: 5.76px;
		}
 	#site-header.fixed.shrink.mobile-menu-layout-overlay .header-main #primary-navigation.overlay-active:not(.close) .menu-toggle .menu-line-1,
	#site-header.fixed.shrink.mobile-menu-layout-overlay .header-main #primary-navigation.overlay-active:not(.close) .menu-toggle .menu-line-3{
		background-color: #000000 !important;
	}
	}

The page I need help with: [log in to see the link]