title: Navbar does not stick to the top (React)
body: <p>I am trying to get my Navbar to scroll up a little before it sticks to the top on my home page. I have saved my navbar as a component as I'll be reusing it again throughout my entire website on different pages. However, I can't seem to get the navbar to stick on my homepage. Can someone please help me?</p>
  <pre><code>
  **Navbar.js**
  
  import React from 'react'
  import './style.css';
  
  
  
  const Navbar = (props) =&gt; {
  
  
    return(
     
          &lt;div className=&quot;page&quot;&gt;
              
               &lt;div className=&quot;banner&quot;&gt;&lt;/div&gt;
  
                  &lt;div className=&quot;navbar-scroll&quot;&gt;
                     &lt;div className=&quot;border&quot;&gt;&lt;/div&gt;
  
                       &lt;nav className=&quot; navbar navbar-expand-sm navbar&quot;&gt;  
                           &lt;div className=&quot;nav-link collapse navbar-collapse&quot;&gt;
                              &lt;ul className=&quot;navbar-nav ml-auto&quot;&gt;
                                &lt;li className=&quot;nav-item&quot;&gt;&lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; 
                                &lt;li className=&quot;nav-item&quot;&gt;&lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
                                &lt;li className=&quot;nav-item&quot;&gt;&lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;
                                &lt;li className=&quot;nav-item&quot;&gt;&lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                                &lt;li className=&quot;nav-item&quot;&gt;&lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;   
                           &lt;/div&gt; 
                       &lt;/nav&gt;
                       &lt;div className=&quot;border&quot;&gt;&lt;/div&gt;
                       &lt;div className=&quot;divider-below-nav&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
  
  
              
         
          &lt;/div&gt;
  
     )
  
   }
  
  
  export default Navbar
  </code></pre>
  <pre><code>**Navbar.css**
  
  
  .page {
      position: relative;
   }
  
  .border {
      left:0;
      right:0;
      background-color:rgb(136, 133, 133);
      height: 4px;
  }
  
  a.nav-link { 
      padding: 1rmb; 
      text-transform: uppercase;
  }
  
  .navbar-expand-sm .navbar-nav .nav-link {
      padding-right: 3.5rem;
      padding-left: .5rem; 
  }
  
  .navbar-expand-sm .navbar-nav .nav-link:hover {
      color: rgba(70, 66, 66, 0.5);
  }
  
   .navbar-nav .nav-link {
      color: rgb(56, 55, 55); 
  }
  
  .divider-below-nav {
      min-height: 42px;
      background-color: orangered;
  }
  
  .banner {
      background-color:orange;
      height: 24.5vh;    
  }
  
  .navbar-scroll {
      position: sticky;
      top: 0;
  }
  
  </code></pre>
  <pre><code>**Home.js**
  
  
  import React from 'react';
  import Navbar from '../../components/Navbar';
  import './style.css';
  
  
  
   const Home = (props) =&gt; {
  
  
      return(
     
        
           &lt;div className=&quot;body&quot;&gt;
        
             &lt;Navbar/&gt;
          
             &lt;div className=&quot;divider2&quot;&gt;&lt;/div&gt;
  
             &lt;div className=&quot;divider3&quot;&gt;&lt;/div&gt;
  
             &lt;div className=&quot;divider4&quot;&gt;&lt;/div&gt;
  
             &lt;div className=&quot;divider1&quot;&gt;&lt;/div&gt;
  
             &lt;div className=&quot;divider4&quot;&gt;&lt;/div&gt;
  
             &lt;div className=&quot;divider1&quot;&gt;&lt;/div&gt;
  
             &lt;div className=&quot;divider4&quot;&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
        ) 
  
      }
  
  export default Home;
  
  
  </code></pre>
  <pre><code>**Home.css**
  
  
  .divider1 {
      min-height: 42px;
      background-color: orangered;
  }
  
  .divider2 {
      min-height: 86px;
      background-color: white;
  }
  
  .divider3 {
      min-height: 42px;
      background-color: rgb(221, 196, 151);
  }
  
  .divider4 {
      min-height: 255px;
      background-color: orange;
  }
  
  </code></pre>