You can make the sticky header to appear when scrolling down on desktop resolution, and also to show on mobile resolution, following the steps below.


Step 1: Disable the Header/Sticky Header header option in the Customizer. 




Step 2: Once you've done that, add the following to Customize/Additional CSS:

.fixed-header-box {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.admin-bar .fixed-header-box {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .fixed-header-box {
        top: 46px;
    }
}




You can check this guide for more details on how to How to add custom CSS / PHP code or modify the theme code




Support for this feature is limited to the green and yellow browsers show here: https://caniuse.com/#feat=css-sticky

Please note!

If you need to use a sticky mobile header - please keep the number of menu items low, so that users can see the full list of items.