Automatically scroll through navigation based on active element

I'm about to give up, so I'm rewriting this question one more time. I just can't make it work, I have too much left to learn for this to work out. I really tried my best but I need help.

As you can see on my Codepen I managed to make it work "somehow". But I know the calculation is wrong and can't even think about how it could work when scrolling back up.

https://codepen.io/Nimyr/pen/ZEaWpzb

All I want is a navigation like here: https://www.lieferando.de/speisekarte/bella-italia-bunde

As you can see the navigation sticks to the top and moves the navigation-element thats fitting the currently active section automatically to the left as you scroll down.

I've set up a WordPress Site where I am trying to make the navigation work just like that. Any ideas? :( I'm really lost.

The usecase for this is pretty simple: I want to make a (especially mobile-)user-friendly page that shows a restaurant's menu. Please don't hesitate to ask any questions if my explanation is weak, I don't know how to formulate it more precisely.

Thanks in advance!

I will also post the code from the Codepen:

HTML

<body>
   <nav>
    <div class="nav-test">
    <ul class="nav-test2">
      <li><a href="#" class="about-marker active">About</a></li>
      <li><a href="#" class="team-marker">Team</a></li>
      <li><a href="#" class="gallery-marker">Gallery</a></li>
      <li><a href="#" class="testimonials-marker">Testimonials</a></li>
      <li><a href="#" class="contact-marker">Contact</a></li>
    </ul>
    </div>
  </nav>
  <section class="about">
    <h1>About</h1>
  </section>
  
  <section class="team">
    <h1>Team</h1>
  </section>
  
  <section class="gallery">
    <h1>Gallery</h1>
  </section>
  
  <section class="testimonials">
    <h1>Testimonials</h1>
  </section>
  
  <section class="contact">
    <h1>Contact</h1>
  </section>
  
</body>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
 font-family: Verdana, serif; 
  color: #fff;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background: #515151;
}

.nav-test {
  display: flex;
  justify-content: center;
}

nav ul {
  width: 500px;
  overflow: scroll hidden;
  display: flex;
  flex-wrap: nowrap;
}

nav ul li {
  list-style: none;
  display: inline-block;
}

nav ul li a {
  display: block;
  padding: 20px 40px;
  text-decoration: none;
  color: #fff;
  transition: background-color .4s ease;
}

nav ul li a.active {
  background-color: #FF0000;
}

section {
  padding: 30% 0;
  text-align: center;
}

section.about {
  background: #888;
}

section.team {
  background: skyblue;
}

section.gallery {
  background: #aaa;
}

section.testimonials {
  background: orange;
}

section.contact {
  background: #ccc;
}

JavaScript (please note that this project also contains highlighting the active navigation element through a change in background color. This is purely optional, I need the automatic scroll. But I started with a Codepen created by Kon Kim as a basic structure to figure the rest out. I failed. gg

(function(){
  
  var navLinks = $('nav ul li a'),
      navH = $('nav').height(),
      section = $('section'),
      documentEl = $(document);

  documentEl.on('scroll', function() {
    var currentScrollPos = documentEl.scrollTop();
    
    section.each(function(){
      var self = $(this);
      if ( self.offset().top < (currentScrollPos + navH) && (currentScrollPos + navH) < (self.offset().top + self.outerHeight() ) ) {
        var
        targetClass = '.' + self.attr('class') + '-marker',
        width = $(targetClass).outerWidth();
        navLinks.removeClass('active'),        
        $(targetClass).addClass('active');
        
        if ( $(targetClass).offset().left > $('.nav-test2').offset().left)
          {
          var
          newWidth = $(targetClass).offset().left - $('.nav-test2').offset().left;
          $('.nav-test2').animate(
            {scrollLeft: newWidth},
            {duration: 150}
            );
                 
           return false;
          }
       
       }   
    });   
  });
  
})();