In order to have the sticky mobile header you can use following CSS code:
@media only screen and (max-width: 1100px) {#header-container:not(.small) {
position: fixed;
}}
@media only screen and (max-width: 799px){#header-container:not(.small) {
position: fixed;
}}
@media only screen and (max-width: 480px) {#header-container:not(.small) {
position: fixed;
}}
@media only screen and (max-width: 799px){#header-container.small {
display: block;
}}
@media only screen and (max-width: 480px) {#header-container.small {
display: block;
}}
Add the code to Theme options General options Custom CSS/JS Custom CSS field.
Note! the solution is not suitable for “Side by side” and “One page scroll” Page templates.
