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