Create a Sticky (Fixed Position) Menu

Let's imagine you want to add a 'sticky'/fixed position menu to your web-page. As in, you would like your menu to 'stick around' the same position, even when the user scrolls their screen.

Fortunately, this is absolutely possible, and we'll show you how to do it in just one minute. What is less fortunate, though, is that there is no built-in 'sticky menu' feature yet. But we're working on it!

The Step-by-Step Guide

Step 1. First off, you'll need to add a custom CSS class to your menu that you would like to 'stick'. No worries if you're not comfortable with CSS code – no prior knowledge is required.

To add a custom CSS rule:

1. Select your menu section in the editor;
2. Open up the element's settings by clicking the 'Gear' icon;
3. In the opened settings, scroll down to the 'Props' sub-section and look up the 'Class' property;
4. Type in the text value of 'fixed' (excluding the quotes);

Step 2. Next, you'll need to add the 'Code' element to your web-page. This can be done from the general toolbar, just look up the 'Code' widget and add it to your page.

Then, using the 'Code' widget, add the custom CSS code provided below:

<style>
  .fixed {
    position: fixed;
    z-index: 100;
  }
</style>

And that should do it! Once you've saved and applied these changes, you can proceed with previewing your web-page – and, fingers crossed, your menu should now be 'sticking' to the screen.

On the off chance this didn't work, or if you have any other questions, comments and suggestions, please do not hesitate to take it to our community forums or contact us directly. Thanks!