Fix Modules on Top of Page
Learn how to pin a module to the top of a page with one simple toggle.
![](https://www.sliderrevolution.com/wp-content/uploads/2022/09/fixed_to_top_featured_image.jpg)
Table of contents
Enabling Fixed on Top
Pinning a module to the top of a page and having it stay there, even when the page scrolls, requires just a single toggle flip in Slider Revolution.
Let’s step through a simple example.
In the module below we have a header bar with some text on the left and some social icons on the right:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/09/module_editor_header_bar.jpg)
We want this header bar to stay visible at all times.
To achieve this go to the Module General Options tab, Layout sub-section:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/09/module_general_options_layout.jpg)
Scroll down to the Advanced Settings panel and toggle Fixed on Top to ON:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/09/layer_options_fixed_on_top_on.jpg)
Now if this module is placed into any page it will stay pinned to the top:
Tips for Fixed on Top Layouts
Use a Spacer Block
A module that is fixed on top will be taken out of the regular flow of content, and will sit in front of whatever content is added directly after it. If you place a WordPress block directly after such a module, this means the top of that block will be obscured.
For example, on this page there is a paragraph of text placed directly below the header example module we used in the previous section:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/09/spacer_block_example_backend_1.jpg)
You will notice, when the page is viewed, the top portion of the text is obscured:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/09/no_spacer_block_front_end.jpg)
The solution to this is adding a Spacer block and setting it to a height sufficient to push the content down below the header module:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/09/space_block_added_backend.jpg)
Now all the text is visible:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/09/space_block_added_frontend.jpg)
Module Height Doesn’t Matter
Even if the visible portion of a “Fixed on Top” module is not very high, it’s fine to leave the height of the module itself at a larger value. In the example header module we’ve been looking at so far, the desktop height is just left at the default of 900px
high:
In short, it doesn’t matter what height the actual fixed on top module is, as long as there is transparent space through which content below it can be seen:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/09/transparent_space_below_header.jpg)