Add Fixed Navigation on Mobile

In this article, we're going to explain how to achieve a fixed navigation on mobile devices.

A fixed navigation on mobile can be achieved by adding custom css to the theme. You can do so by going to: X/Pro > Theme Options > CSS and adding following code.

Note: The Fixed Top setting in our theme options is only applicable for deskop / large viewports. Therefore you will need this tweak to achieve a fixed navigation on mobile.

@media (max-width: 979px) {

    .x-navbar-fixed-top{
       position: fixed;
    }

    body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: 90px;
    }

}

Summary

Awesome! You now have a fixed navigation on mobile.

See something inaccurate? Let us know