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.