# Fixed Navigation

**URL:** <https://forum.klai.studio/t/fixed-navigation/300>\
**Category:** Support\
**Created:** [March 31, 2021, 8:41pm UTC](https://forum.klai.studio/t/fixed-navigation/300 "2021-03-31T20:41:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Neil](https://forum.klai.studio/user_avatar/forum.klai.studio/neil/32/123_2.png) [@Neil](https://forum.klai.studio/u/Neil)\
**Post date:** [March 31, 2021, 8:41pm UTC](https://forum.klai.studio/t/fixed-navigation/300/1 "2021-03-31T20:41:43Z")

</div>

How do I fix the top and side navigation bars so that only the page content scrolls? Currently when I scroll everything moves.

---

<div class="post-metadata">

**Author:** ![delfs](https://forum.klai.studio/user_avatar/forum.klai.studio/delfs/32/411_2.png) [@delfs](https://forum.klai.studio/u/delfs)\
**Post date:** [April 1, 2021, 3:23am UTC](https://forum.klai.studio/t/fixed-navigation/300/2 "2021-04-01T03:23:40Z")

</div>

This is a great question.  
Let’s start by fully understanding the page structure for form types `formblank`

Refer to this drawing:  
[https://whimsical.com/LLRFN4ZbUzJL8gxAqpjMGm](https://whimsical.com/LLRFN4ZbUzJL8gxAqpjMGm)

To ‘freeze’ the page and allow scrolling …  
The `<body>` tag needs some small CSS to stop it from scrolling:

```auto
body { overflow:hidden;}

```

next the page needs to have its height set to the screen. We can do this with Tailwind classes in the misc tab.

```auto
"styleClassesPage" : "h-screen",
"styleClassesBody" : "h-full overflow-scroll"

```

This makes the main page wrapper a fixed height and the form body maximize within that. ( inner bits ) scroll.

I am coding this off my head so I hope I didn’t miss anything.