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

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

The main reason why we made this change was because of the space that remained for the rest of the elements (like text or images). 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 really need your website to support this behavior on the mobile too, 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 just need to add this 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 make sure that you have 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).

Updated on August 25, 2020

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at hello@pixelgrade.com and we will give you a helping hand.