Why is my Header Area no longer sticky on the Mobile?

It’s good to know that starting with version 2.0 of the theme, and the menu is no longer sticky at the top of the page (on the mobile site).

We made this change because of the space that remained for the rest of the elements (like text or images), and it was too small and not eye-candy from a visual point of view. However, this will be available only when the website is reached from a computer.

On the other hand, if you need your website to support this behavior on mobile, there’s a little trick that might help you make it happen.

First of all, you need to make sure that the Make Menu Bar Transparent option is not checked and all your header elements have a background under them. Once you’ve done that, you need to add this CSS:

CSS

.touch .site-header {
    position: fixed;
}

On WordPress, Dashboard→ Appearance→ Customize→ CSS Editor area, and that’s all. Your header will be at the top of the page on mobile too.

*Note: Keep in mind that you need to ensure that you have an unchecked Make Menu Bar Transparent option. If you miss this step, your header elements (logo and menu trigger) will not be distinguishable when the content on the page is white or closer to the header elements color (you can give it a try this way and convince, if you want).