title: Setting fixed navigation at the top of the form
body: <p>I am using Bootstrap 4 and I have a div as a container for 3 rows.</p>
  <p>The 1st and the 3rd row will be fixed while the middle(content) is a big form and will be scrolled while the 1st and the 3rd row will be always visible.</p>
  <p>I am having trouble making this help, can you please help.</p>
  <p>Below is my code:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;d-flex justify-content-center&quot; style=&quot;position: absolute;left:20%;right:5%;top:10%;z-index: 1000;&quot;&gt;
              &lt;div class=&quot;col-4&quot;&gt;
                      &lt;!-- Top navigation --&gt;
                      &lt;nav class=&quot;navbar navbar-default&quot; role=&quot;navigation&quot; id=&quot;navbar-example&quot;&gt;
                          &lt;div&gt;
                              &lt;ul class=&quot;nav navbar-nav&quot;&gt;
                                  &lt;li&gt;&lt;a href=&quot;#profile&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Courses&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;row&quot; style=&quot;padding-top: 5%;&quot;&gt;
              &lt;input type=&quot;hidden&quot; id=&quot;_token&quot; &gt;
              &lt;div class=&quot;col-md-12&quot;&gt;
                  &lt;div class=&quot;box box-primary&quot;&gt;
                      &lt;!-- /.box-header --&gt;
                      &lt;!-- form start --&gt;
                      &lt;form class=&quot;form-horizontal&quot;
                            data-target=&quot;#navbar-example&quot; id=&quot;adaptation_form&quot;&gt;
                          &lt;div class=&quot;box-body&quot;&gt;
                              &lt;div id=&quot;profileAnchor&quot; class=&quot;box box-secondary&quot;&gt;
                                  &lt;div class=&quot;box-body&quot;&gt;
                                      &lt;div class=&quot;panel panel-info&quot;&gt;
                                          &lt;div class=&quot;panel-heading&quot;&gt;Profile&lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- /.box-body --&gt;
                          &lt;!-- /.box-footer --&gt;
                      &lt;/form&gt;
                      &lt;div class=&quot;box-footer&quot;&gt;
                          &lt;a type=&quot;button&quot; href=&quot;{{ route('adapt.cancel', [$id]) }}&quot; class=&quot;btn btn-default&quot;&gt;Cancel&lt;/a&gt;
                          &lt;button id=&quot;create_dataset&quot; name=&quot;create_dataset&quot; type='submit'
                                  class=&quot;btn btn-primary pull-right&quot;&gt;Submit
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>I want the Top navigation and the footer to be fixed, I tried with position:fixed but then it overlaps the content when I scroll.</p>
  <p>Screenshots for reference :
  In the image below there is a header with Profile and Courses, I want that to be fixed the rest of the content if scrolled should still make the header fixed and visible.
  <a href="https://i.stack.imgur.com/ci7Yc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ci7Yc.png" alt="enter image description here" /></a></p>
  <p>I tried with position: fixed, however it overlaps when I scroll the content.
  <a href="https://i.stack.imgur.com/lgj0w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lgj0w.png" alt="enter image description here" /></a></p>