The fixed header is called in here in the CSS:
#masthead-wrap {
background-color: #262626;
-webkit-box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
}
In the media query for smartphone screen widths, the positioning is overridden, and made absolute instead of fixed:
/* --- Smartphones (portrait and landscape) --- */
@media screen and (max-width : 600px) {
#masthead-wrap {
position: absolute;
}
}
You could try changing the positioning from absolute to fixed there. You should test this tweak on multiple mobile devices to ensure that it works as you expect.
Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.
An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.
