Offset scroll anchor in HTML with Bootstrap 4 fixed navbar

Question

So, I have this single page that consists of a few sections. Users can go to these sections by scrolling themselves or clicking in the navbar (a href with anchor). Due to th

Answer 1

This solution adds a padding and removes the gap by a negative margin at the top. This worked best for me.

section {
    padding-top: 56px;
    margin-top: -56px;
}

.offset {
    height: 54px;
}

/* START SNIPPET */
section {
    padding-top: 56px;
    margin-top: -56px;
}
/* END SNIPPET */

#section1 p, #section3 p {
    background-color: #ffffd;
}
#section2 p, #section4 p {
    background-color: #ccc;
}
p {
    min-height: 15rem;
}

  
    
    
    

    
    

  
  
 

      Navbar
      
        
      

      

        

          

            Section 1
          
          

            Section 2
          
          

            Section 3
          
          

            Section 4
          
        
      
    
 
  

    

    

      

        Section 1
      
    
    

      

        Section 2
      
    
    

      

        Section 3
      
    
    

      

        Section 4