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

It’s good to know that start­ing with the ver­sion 2.0 of the theme the menu is no longer sticky at the top of the page (on the mobile side).

The main rea­son why we made this change was because of the space that remained for the rest of the ele­ments (like text or images). It was too small and not eye-can­dy from a visu­al point of view. How­ev­er, this will be avail­able only when the web­site is reached from a com­put­er.

On the oth­er hand, if you real­ly need your web­site to sup­port this behav­ior on the mobile too, there’s a lit­tle trick that might help you make it hap­pen.

First of all, you need to make sure that the Make Menu Bar Trans­par­ent option is not checked, and all your head­er ele­ments have a back­ground under them. Once you’ve done that, you just need to add this CSS:


.touch .site-header {
    position: fixed;

on Word­Press Dash­board→ Appear­ance→ Cus­tomize→ CSS Edi­tor area and that’s all. Your head­er 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 Trans­par­ent option. If you miss this step, your head­er ele­ments (logo and menu trig­ger) will not be dis­tin­guish­able when the con­tent on the page is white or clos­er to the head­er ele­ments col­or (you can give it a try this way and con­vince, if you want).

This article applies to Rosa, as they share the same underlying structure.

Updated on April 19, 2017

Was this article helpful?