title: Bootstrap - scrollspy responsivness not working
body: <p>I have problem with responsivness of the page. If I go to half width of the page, the scrollspy disapear. I have no idea why.</p>
  <p>You can see whole page if you run code I posted here.</p>
  <p>I have another page that has not problem with responsivnes, there I do not use scrollspy.</p>
  <p>I would like to give you more information, but I've used Bootstrap 3x and now I am doing just a school project.</p>
  <p><a href="https://i.stack.imgur.com/RvRoi.jpg" rel="nofollow noreferrer">here it is displaying</a></p>
  <p><a href="https://i.stack.imgur.com/BfeuL.jpg" rel="nofollow noreferrer">here not</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;CONFT&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link rel="shortcut icon" href="images/logo_tab_icon.png" type="image/x-icon"&gt;
      &lt;style&gt;
        body 
        {
            background-color: white; 
        }
  
        .navbar 
        {
            background-color: black;
        }
  
        .nav-pills .active
        {
        /*  FARBA AKTÍVNEHO TABU V NAVIGÁCII A JEHO ZAOBLENIE */
        background: linear-gradient(to bottom, #ffbb59 0%, #ff654d 100%);
        border-radius: 2%;
        }
  
        .row.first-row {
            margin-top: 1em;
            margin-right: 4em;
            margin-left: 4em;
        }
        h4.white 
        {
            color: white;
        }
  
        #tl
        /* TLAČIDLÁ "What I will learn?" */
        {
        margin-bottom: 1em;
        margin-top: 0.5em;
        }
  
        /* info SÚ INFORMÁCIE O AUTOROVI V BIELOM PÁSE */
        .info 
        {
        margin-top: 3em;
        padding-top: 2em;
        padding-bottom: 2em;
        }
  
        .info p 
        {
        padding-top: 0.2em;
        }
  
        footer 
        {
        margin-top: 50px;
        }
  
        @media screen and (max-width: 768px) 
        {
            div.col-md-4
            {
                margin-bottom: 1em;
            }
        }
        /* CSS FOR SCROLLSPY */
        body                                
        {
          position: relative;
        }
  
        ul.nav-pills.flex-column 
        {
          top: 20px;
          position: fixed;
          margin-top: 50px;
        }
  
        div.col-8 div 
        {
          height: 500px;
          width: 500px;
        }
  
        .row
        {
          width: 500px;
        }
  
        div.content-author
        {
          width: 800px;
        }
  
      &lt;/style&gt;
      &lt;script&gt;
          $(function () 
          {
              $('[data-toggle="popover"]').popover()
          })
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body data-spy="scroll" data-target="#myScrollspy" data-offset="1"&gt;
  
      &lt;nav class="navbar navbar-expand-lg navbar-dark fixed-top"&gt;
          &lt;a class="navbar-brand" href="#"&gt;
              &lt;img src="images/logo.png" alt="logo" style="width:50px;"&gt;
          &lt;/a&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
              &lt;ul class="navbar-nav nav nav-pills"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item active"&gt;
                      &lt;a class="nav-link active" href="#"&gt;About author&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;CCNA 1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;CCNA 2&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#" data-toggle="popover" title="CCNA 3" 
                      data-content="This course is already in progress. Stay tuned."&gt;CCNA 3&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="d-none d-xl-block col-xl-2 bd-toc disapear1"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                &lt;nav class="col-sm-3 col-4" id="myScrollspy"&gt;
                  &lt;ul class="nav nav-pills flex-column"&gt;
                    &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link active" href="#section1"&gt;Section 1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#section2"&gt;Section 2&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#section3"&gt;Section 3&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item dropdown"&gt;
                      &lt;a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"&gt;Section 4&lt;/a&gt;
                      &lt;div class="dropdown-menu"&gt;
                        &lt;a class="dropdown-item" href="#section41"&gt;Link 1&lt;/a&gt;
                        &lt;a class="dropdown-item" href="#section42"&gt;Link 2&lt;/a&gt;
                      &lt;/div&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/nav&gt;
  
                &lt;div class="col-sm-7 col-8 content-author disapear2"&gt;
                  &lt;div id="section1" class="bg-success"&gt;    
                    &lt;h1&gt;Section 1&lt;/h1&gt;
                    &lt;p&gt;Try to scroll this section and look at the navigation list while scrolling!&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div id="section2" class="bg-warning"&gt; 
                    &lt;h1&gt;Section 2&lt;/h1&gt;
                    &lt;p&gt;Try to scroll this section and look at the navigation list while scrolling!&lt;/p&gt;
                  &lt;/div&gt;        
                  &lt;div id="section3" class="bg-secondary"&gt;         
                    &lt;h1&gt;Section 3&lt;/h1&gt;
                    &lt;p&gt;Try to scroll this section and look at the navigation list while scrolling!&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div id="section41" class="bg-danger"&gt;         
                    &lt;h1&gt;Section 4-1&lt;/h1&gt;
                    &lt;p&gt;Try to scroll this section and look at the navigation list while scrolling!&lt;/p&gt;
                  &lt;/div&gt;      
                  &lt;div id="section42" class="bg-info"&gt;         
                    &lt;h1&gt;Section 4-2&lt;/h1&gt;
                    &lt;p&gt;Try to scroll this section and look at the navigation list while scrolling!&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;footer class="bg-primary text-white text-center text-lg-start"&gt;
          &lt;!-- Copyright --&gt;
          &lt;div class="text-center p-3" style="background: linear-gradient(to bottom,#ffbb59 0%, #ff654d 100%"&gt;
              © 2021 Copyright: René Martin Kuda, SPŠT Spišská Nová Ves, 3.D
          &lt;/div&gt;
          &lt;!-- Copyright --&gt;
        &lt;/footer&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>