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