anwi_website/dist/Js/navbar.js

$(document).ready(function() {
    let navbarHtml = `<div class="biz-nav-wrapper">
    <nav class="navbar pb-4 navbar-expand-lg bg-body-tertiary">
        <div class="container">
        <a class="navbar-brand" href="./index.html"><img src="./dist/assets/imgs/anwi-logo-1.png"
        class="img-fluid" alt="Anwi-Logo"></a>
    <button class="navbar-toggler collapsed border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="icon-bar top-bar"></span>
      <span class="icon-bar middle-bar"></span>
      <span class="icon-bar bottom-bar"></span>
    </button>

        <div class="collapse navbar-collapse mega-nav " id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-none">
                <li class="nav-item">
                    <ul class="navbar-nav ">
                        <li class="nav-item dropdown has-mega-menu">
                            <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
                                aria-expanded="false">Laptops</a>
                            <div class="dropdown-menu rounded-0">
                                <div class="container">
                                    <div class="row dropdown-items-row">
                                        <ul class="d-flex justify-content-center list-inline">
                                            <li class="mx-3"> <a class="dropdown-item " href="#">
                                                    <div class="dropdown-item-img text-center mb-2">
                                                        <img src="./dist/assets/imgs/Navbar/Creator-laptop.png"
                                                            alt="Laptop-img" class="img-fluid">
                                                    </div>
                                                    <div class="dropdown-item-content">
                                                        <h6
                                                            class="dropdown-item-title text-center satoshi_font">
                                                            Creator Laptop</h6>
                                                    </div>
                                                </a></li>
                                            <li class="mx-3"> <a class="dropdown-item " href="#">
                                                    <div class="dropdown-item-img text-center mb-2">
                                                        <img src="./dist/assets/imgs/Navbar/Business-laptop.png"
                                                            alt="Laptop-img" class="img-fluid">
                                                    </div>
                                                    <div class="dropdown-item-content">
                                                        <h6
                                                            class="dropdown-item-title text-center satoshi_font">
                                                            Business Laptop</h6>
                                                    </div>
                                                </a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <ul class="navbar-nav ">
                        <li class="nav-item dropdown has-mega-menu">
                            <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
                                aria-expanded="false">ALl in One</a>
                            <div class="dropdown-menu rounded-0">
                                <div class="container">
                                    <div class="row dropdown-items-row">
                                        <ul class="d-flex justify-content-center list-inline">
                                            <li class="mx-3"> <a class="dropdown-item " href="#">
                                                    <div class="dropdown-item-img text-center mb-2">
                                                        <img src="./dist/assets/imgs/Navbar/Compact-cpu.png"
                                                            alt="Laptop-img" class="img-fluid">
                                                    </div>
                                                    <div class="dropdown-item-content">
                                                        <h6
                                                            class="dropdown-item-title text-center satoshi_font">
                                                            Compact CPU</h6>
                                                    </div>
                                                </a></li>
                                            <li class="mx-3"> <a class="dropdown-item " href="#">
                                                    <div class="dropdown-item-img text-center mb-2">
                                                        <img src="./dist/assets/imgs/Navbar/Compact-cpu-2.png"
                                                            alt="Laptop-img" class="img-fluid">
                                                    </div>
                                                    <div class="dropdown-item-content">
                                                        <h6
                                                            class="dropdown-item-title text-center satoshi_font">
                                                            Compact CPU</h6>
                                                    </div>
                                                </a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <ul class="navbar-nav ">
                        <li class="nav-item dropdown has-mega-menu">
                            <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
                                aria-expanded="false">Servers</a>
                            <div class="dropdown-menu rounded-0">
                                <div class="container">
                                    <div class="row dropdown-items-row">
                                        <ul class="d-flex justify-content-center list-inline">
                                            <div class="owl-carousel owl-theme
            server-img-sec">
                                                <div class="item">
                                                    <img src="./dist/assets/imgs/Navbar/Server-1.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">Server 01</h6>
                                                </div>
                                                <div class="item">
                                                    <img src="./dist/assets/imgs/Navbar/Server-2.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">Server 02 CPU
                                                    </h6>
                                                </div>
                                                <div class="item">
                                                    <img src="./dist/assets/imgs/Navbar/Server-3.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">Server 03</h6>
                                                </div>
                                                <div class="item">
                                                    <img src="./dist/assets/imgs/Navbar/Server-4.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">Compact CPU
                                                    </h6>
                                                </div>
                                                <div class="item">
                                                    <img src="./dist/assets/imgs/Navbar/Server-5.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">Compact CPU
                                                    </h6>
                                                </div>
                                            </div>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <ul class="navbar-nav ">
                        <li class="nav-item dropdown has-mega-menu">
                            <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
                                aria-expanded="false">CPU's</a>
                            <div class="dropdown-menu rounded-0">
                                <div class="container">
                                    <div class="row dropdown-items-row">
                                        <ul class="d-flex justify-content-center list-inline">
                                            <li class="mx-3"> <a class="dropdown-item " href="#">
                                                    <div class="dropdown-item-img text-center mb-2">
                                                        <img src="./dist/assets/imgs/Navbar/Cpu-1.png"
                                                            alt="Laptop-img" class="img-fluid">
                                                    </div>
                                                    <div class="dropdown-item-content">
                                                        <h6
                                                            class="dropdown-item-title text-center satoshi_font">
                                                            Compact CPU</h6>
                                                    </div>
                                                </a></li>
                                            <li class="mx-3"> <a class="dropdown-item " href="#">
                                                    <div class="dropdown-item-img text-center mb-2">
                                                        <img src="./dist/assets/imgs/Navbar/Cpu-2.png"
                                                            alt="Laptop-img" class="img-fluid">
                                                    </div>
                                                    <div class="dropdown-item-content">
                                                        <h6
                                                            class="dropdown-item-title text-center satoshi_font">
                                                            Compact CPU</h6>
                                                    </div>
                                                </a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <ul class="navbar-nav ">
                        <li class="nav-item dropdown has-mega-menu">
                            <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
                                aria-expanded="false">Accessories</a>
                            <div class="dropdown-menu rounded-0">
                                <div class="container">
                                    <div class="row dropdown-items-row">
                                        <ul class="d-flex justify-content-center list-inline">
                                            <div class="owl-carousel owl-theme
            accessories-img-sec">
                                                <div class="item">
                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-1.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">Ora3 PCI
                                                        Express
                                                    </h6>
                                                </div>
                                                <div class="item">
                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-2.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">Ora4 PCI
                                                        Express
                                                    </h6>
                                                </div>
                                                <div class="item">
                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-3.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">DDR5 Desktop
                                                        Memory
                                                    </h6>
                                                </div>
                                                <div class="item">
                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-4.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">DDR4 Desktop
                                                        Memory
                                                    </h6>
                                                </div>
                                                <div class="item">
                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-5.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">DDR4 Desktop
                                                        Memory
                                                    </h6>
                                                </div>
                                            </div>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
                        aria-expanded="false">Support</a>
                </li>
                <li class="nav-item">
                    <a class="btn btn-dark button_dark" href="#">Get in touch</a>
                </li>
            </ul>
        </div>

        <div class="collapse navbar-collapse mobile-menu " id="navbarSupportedContent">
            <ul class="navbar-nav d-none">
                <li class="nav-item">
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item border-0">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseOne" aria-expanded="true"
                                    aria-controls="collapseOne">
                                    Laptops
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show"
                                aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                <div class="accordion-body pt-0">
                                    <ul class="list-inline ps-3">
                                        <li>Creator Laptop</li>
                                        <li>Business Laptop</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item border-0">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                                    aria-expanded="false" aria-controls="collapseTwo">
                                    ALl in One
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse"
                                aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <ul class="list-inline ps-3">
                                        <li>Compact CPU</li>
                                        <li>Compact CPU</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item border-0">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapseThree"
                                    aria-expanded="false" aria-controls="collapseThree">
                                    Servers
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse"
                                aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <ul class="list-inline ps-3">
                                        <li>Server 01</li>
                                        <li>Server 02 CPU</li>
                                        <li>Server 03</li>
                                        <li>Compact CPU</li>
                                        <li>Compact CPU</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item border-0">
                            <h2 class="accordion-header" id="headingfour">
                                <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapsefour"
                                    aria-expanded="false" aria-controls="collapsefour">
                                    CPU's
                                </button>
                            </h2>
                            <div id="collapsefour" class="accordion-collapse collapse"
                                aria-labelledby="headingfour" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <ul class="list-inline ps-3">
                                        <li>Compact CPU</li>
                                        <li>Compact CPU</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item border-0">
                            <h2 class="accordion-header" id="headingfive">
                                <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapsefive"
                                    aria-expanded="false" aria-controls="collapsefour">
                                    Accessories
                                </button>
                            </h2>
                            <div id="collapsefive" class="accordion-collapse collapse"
                                aria-labelledby="headingfive" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <ul class="list-inline ps-3">
                                        <li>Ora3 PCI Express</li>
                                        <li>Ora4 PCI Express</li>
                                        <li>DDR5 Desktop Memory</li>
                                        <li>DDR4 Desktop Memory</li>
                                        <li>DDR4 Desktop Memory</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
   
        </div>
    </nav>
</div>`;

    $("#navbar-head").html(navbarHtml);
    $(".navbar-toggler").click(function(){
        $("#navbar-head").toggleClass("bg-white");
    })
    
    $('.pricing').find('.biz-nav-wrapper .navbar').addClass('bg-white');

    //  active-menu
    if (location.pathname != "/") {
        // Main Nav
        $(".navbar-nav li a").each(function() {
            if (this.href === location.href) {
                $(this).addClass("active");
                if ($(this).parents().hasClass("nav-item")) {
                    $(this).parents(".nav-item").find(".nav-link").addClass("active");
                }
                return false;
            }
        });
    }

    // Add Dropdown chevron icon
    let width = $(window).width();

    if (width <= 991.98) {
        $(".dropdown .nav-link").attr("data-toggle", "dropdown");
        $('.navbar-collapse.mega-nav ul').addClass('d-none')
        $('.navbar-collapse.mobile-menu ul').removeClass('d-none')

    } else {
        $(".dropdown .nav-link").attr("data-toggle", "");
        $('.navbar-collapse.mega-nav ul').removeClass('d-none')
        $('.navbar-collapse.mobile-menu ul').addClass('d-none')
        $('.navbar-expand-lg .navbar-collapse.mobile-menu').remove()
    }
    // Toggle Icon Change
    $(".biz-nav-wrapper .navbar-toggler").click(function() {
        $(this).find(".navbar-toggler-icon,.navbar-close-icon").toggle("slow");
        $(".index-new").find(".navbar").toggleClass("bg-white");
    });

    //on-scroll-nav
    var c,
        currentScrollTop = 0,
        navbar = $("#navbar-head");

    // $(window).scroll(function() {
    //     var a = $(window).scrollTop();
    //     var b = navbar.height();
    //     currentScrollTop = a;

    //     // if (c < currentScrollTop && a > b + b) {
    //     //     if ($("#navbarNavDropdown").hasClass("show") == false) {
    //     //         navbar.addClass("scrollUp");
    //     //         $(".workflow-pills").removeClass("top-space");
    //     //     }
    //     // } else if (c > currentScrollTop && !(a <= b)) {
    //     //     navbar.removeClass("scrollUp");
    //     //     $(".workflow-pills").addClass("top-space");
    //     // }

    //     c = currentScrollTop;
    // });
    $(".nav-item.dropdown.has-mega-menu").off().hover(
      function(e){ $("#navbar-head").find(".navbar").css("background-color", "#fff");}, // over
      function(e){$("#navbar-head").find(".navbar").css("background-color", ""); }  // out
  );
    $(document).scroll(function() { 
      if($(window).scrollTop() === 0) {
        $(".nav-item.dropdown.has-mega-menu").off().hover(
          function(e){ $("#navbar-head").find(".navbar").css("background-color", "#fff");}, // over
          function(e){$("#navbar-head").find(".navbar").css("background-color", ""); }  // out
      );
      }
      else{
        $(".nav-item.dropdown.has-mega-menu").off().hover(
          function(e){ $("#navbar-head").find(".navbar").css("background-color", "#fff");}, // over
          function(e){$("#navbar-head").find(".navbar").css("background-color", "#fff"); }  // out
      );
      }
   });
    
    var scroll_start = 0;
    var startchange = $(".main-body");
    var offset = startchange.offset();
    if (startchange.length) {
        $(document).scroll(function() {
            scroll_start = $(this).scrollTop();
            if (scroll_start > offset.top) {
                $("#navbar-head")
                    .find(".navbar")
                    .css("background-color", "#fff")
                    .css("box-shadow", "0px 12px 20px -25px");
            } else {
                $("#navbar-head")
                    .find(".navbar")
                    .css("background-color", "transparent")
                    .css("box-shadow", "none");
                    $(".nav-item.dropdown.has-mega-menu").hover(
                      function(e){ $("#navbar-head").find(".navbar").css("background-color", "#fff");}, // over
                      function(e){$("#navbar-head").find(".navbar").css("background-color", ""); }  // out
                  );
            }
        });
    } else {
        $("#navbar-head")
            .find(".navbar")
            .css("background-color", "#fff")
            .css("box-shadow", "0px 12px 20px -25px");
    }
$('.owl-carousel.server-img-sec').owlCarousel({
  // loop: true,
  margin: 10,
  rtl: false,
  nav: false,
  autoHeight:true,
  responsive: {
      0: {
          items: 1
      },
      600: {
          items: 3
      },
      1000: {
          items: 4
      }
  }
});
$('.owl-carousel.accessories-img-sec').owlCarousel({
  // loop: true,
  margin: 10,
  rtl: false,
  nav: false,
  autoHeight:true,
  responsive: {
      0: {
          items: 1
      },
      600: {
          items: 3
      },
      1000: {
          items: 4
      }
  }
});

$('.navbar-nav').mouseover(function (e) { 
    $('.mbil-name').addClass('padding_bottom_ONE_FIVE');
    $('.navbar-brand  img').addClass('padding_bottom_ONE_FIVE');
});

$('.navbar-nav').mouseout(function (e) { 
    $('.mbil-name').removeClass('padding_bottom_ONE_FIVE');
    $('.navbar-brand  img').removeClass('padding_bottom_ONE_FIVE');
});

});