Snippets Collections
<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
star

Sun Aug 28 2022 14:44:39 GMT+0000 (Coordinated Universal Time)

#htm #navbar
star

Wed Jul 20 2022 09:20:22 GMT+0000 (Coordinated Universal Time)

#navbar #javascript
star

Wed Jul 20 2022 09:16:57 GMT+0000 (Coordinated Universal Time)

#navbar #javascript #scrollspy
star

Sun Mar 20 2022 17:07:22 GMT+0000 (Coordinated Universal Time) https://agency-website-c0d1e7.webflow.io/

#css #js #header #navbar #scroll-animation
star

Sun May 30 2021 10:52:07 GMT+0000 (Coordinated Universal Time)

#html #jquery #css #navbar

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension