Sticky Site Header for Large Screens

The theme by default uses a site header that scrolls with the website page.
You can make it sticky (stick to the top of the screen) for larger screen sizes.
We don't recommend using a sticky header on mobile, as it may take up too much of the small screen.

Go to Appearance > Customize > Additional CSS, and add:

/* Sticky Header on large screens */
@media only screen and (min-width: 980px) {
	.site-header {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 999;
	}
	.admin-bar .site-header {
		top: 32px;
	}
	.site-header > .wrap {
		padding: 10px 30px;
	}
	
	.front-page.header-full-width .site-header {
		background-color: rgba(0, 0, 0, 0.4);
	}
}

Note that the home page site header is somewhat transparent.
You may need to change the 0.4 to a larger number in this line, so that the header is not so transparent:

.front-page.header-full-width .site-header {
	background-color: rgba(0, 0, 0, 0.4);
}