<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-light navbar-light">
  <!-- Container wrapper -->
  <div class="container-fluid">
    <!-- Navbar brand -->
    <a class="navbar-brand" href="#">Brand</a>
 
    <!-- Toggle button -->
    <button
      class="navbar-toggler"
      type="button"
      data-mdb-toggle="collapse"
      data-mdb-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <i class="fas fa-bars"></i>
    </button>
 
    <!-- Collapsible wrapper -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <!-- Link -->
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <!-- Dropdown -->
        <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="navbarDropdown"
            role="button"
            data-mdb-toggle="dropdown"
            aria-expanded="false"
          >
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
 
      <!-- Icons -->
      <ul class="navbar-nav d-flex flex-row me-1">
        <li class="nav-item me-3 me-lg-0">
          <a class="nav-link" href="#"><i class="fas fa-shopping-cart"></i></a>
        </li>
        <li class="nav-item me-3 me-lg-0">
          <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
        </li>
      </ul>
      <!-- Search -->
      <form class="w-auto">
        <input
          type="search"
          class="form-control"
          placeholder="Type query"
          aria-label="Search"
        />
      </form>
    </div>
  </div>
  <!-- Container wrapper -->
</nav>
<!-- Navbar -->

<div class="scl-navbar-menu">
    <div class="scl-navbar-items">
        <div class="scl-navbar-content" data-dropdown>
            <button class="scl-dropdown-name" data-dropdown-button>
                Name
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu">
                <a href="#" class="scl-dropdown-content">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content" data-dropdown>
            <button class="scl-dropdown-name" data-dropdown-button>
                Home
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu">
                <a href="#" class="scl-dropdown-content">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content" data-dropdown>
            <button class="scl-dropdown-name" data-dropdown-button>
                More
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu">
                <a href="#" class="scl-dropdown-content">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content">drop down-content-4</a>
            </div>
        </div>
    </div>
    <div class="scl-hamburger-container">
        <div class="scl-hamburger"></div>
        <div class="scl-hamburger"></div>
        <div class="scl-hamburger"></div>
    </div>
</div>
<!-- navbar for phone -->
<aside class="scl-side-bar">
    <div class="scl-navbar-items-phone">
        <div class="scl-navbar-content-phone" data-dropdown-phone>
            <button class="scl-dropdown-name-phone" data-dropdown-button-phone>
                Name
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu-phone">
                <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content-phone" data-dropdown-phone>
            <button class="scl-dropdown-name-phone" data-dropdown-button-phone>
                Home
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu-phone">
                <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content-phone" data-dropdown-phone>
            <button class="scl-dropdown-name-phone" data-dropdown-button-phone>
                More
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu-phone">
                <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a>
            </div>
        </div>
    </div>
</aside>

$(window).scroll(function() {
  $('div').toggleClass('scrolled', $(this).scrollTop() > 50);
});

$(document).ready(function() {
  var sectionIds = $('a.nav-link');
  $(document).scroll(function() {
    sectionIds.each(function() {
      var container = $(this).attr('href');
      var containerOffset = $(container).offset().top;
      var containerHeight = $(container).outerHeight();
      var containerBottom = containerOffset + containerHeight;
      var scrollPosition = $(document).scrollTop();
      if (scrollPosition < containerBottom - 350 && scrollPosition >= containerOffset - 350) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });
  });
});

/*CSS*/
#nav__wrapper {
  transform: translateY(0%);
  transition: all 0.3s ease-out;
}

#nav__wrapper.header_hide {
  transform: translateY(-100%);
}
/*CSS*/
  
/*JS*/
const header_el = $("#nav__wrapper"),
    mywindow = $(window);
let mypos = mywindow.scrollTop(),
    up = !1,
    newscroll = 0;
mywindow.scroll(function () {
    (newscroll = mywindow.scrollTop()) > mypos && !up ? (header_el.toggleClass("header_hide"), (up = !up)) : newscroll < mypos && up && (header_el.toggleClass("header_hide"), (up = !up)), (mypos = newscroll);
});
/*JS*/

// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link