anwi_website/dist/Js/navbar1.js

$(document).ready(function () {

    let navbarHtml = `<div class="biz-nav-wrapper d-lg-none d-block">
    <nav class="navbar pb-lg-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">
                                                            ZENO 14 inch Business 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">
                                                            ZENO 15.6 inch 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">
                                                            24 inch AIO i5</h6>
                                                    </div>
                                                </a></li>
                                            <li class="mx-3"> <a class="dropdown-item " href="./allinone34inch.html">
                                                    <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">
                                                            34 inch AIO i7 4K</h6>
                                                    </div>
                                                </a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="nav-item d-none">
                    <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 d-none">
                    <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">
                                                <a href="./products/ora3.html" class="text-decoration-none text-dark">
                                                    <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>
                                                    </a>
                                                </div>
                                                <div class="item">
                                                <a href="./products/ora4.html" class="text-decoration-none text-dark">
                                                    <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>
                                                    </a>
                                                </div>
                                                <div class="item">
                                                <a href="./products/ddr5.html" class="text-decoration-none text-dark">
                                                    <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>
                                                    </a>
                                                </div>
                                                <div class="item">
                                                <a href="./products/ddr4.html" class="text-decoration-none text-dark">
                                                    <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>
                                                    </a>
                                                </div>
                                                <div class="item">
                                                <a href="./products/ddrlm4.html" class="text-decoration-none text-dark">
                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-5.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">DDR4 Laptop
                                                        Memory
                                                    </h6>
                                                    </a>
                                                </div>
                                                <div class="item">
                                                <a href="./products/ddrlm5.html" class="text-decoration-none text-dark">
                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-6.png"
                                                        class="img-fluid" alt="anwi-star-product">
                                                    <h6 class="text-center satoshi_font">DDR5 Laptop
                                                        Memory
                                                    </h6>
                                                    </a>
                                                </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><a class="dropdown-item " href="#">ZENO 14 inch Business Laptop</a></li>
                                        <li><a class="dropdown-item " href="#">ZENO 15.6 inch Business Laptop</a></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><a href="#" class="text-dark text-decoration-none cursor-pointer">24 inch AIO i5</a></li>
                                        <li><a href="./allinone34inch.html" class="text-dark text-decoration-none cursor-pointer">34 inch AIO i7 4K</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item border-0 d-none">
                            <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 d-none">
                            <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<a href="#" class="text-dark text-decoration-none cursor-pointer">24 inch AIO i5</a></li>
                                        <li><a href="./allinone34inch.html" class="text-dark text-decoration-none cursor-pointer">34 inch AIO i7 4K</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item border-0">
                            <h2 class="accordion-header" id="headingfive">
                                <button class="accordion-button collapsed nav_item" item_id="106633220000002" 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>
                                            <a href="./ramproducts.html" class="text-decoration-none text-dark">RAMs</a>
                                        </li>
                                        <li>
                                            <a href="./storageproducts.html" class="text-decoration-none text-dark">Storage</a>
                                        </li>
                                        <li class="d-none">                                            
                                        <a href="./products/ddr5.html" class="text-decoration-none text-dark">DDR5 Desktop Memory</a>
                                        </li>
                                        <li class="d-none">
                                            <a href="./products/ddr4.html" class="text-decoration-none text-dark">DDR4 Desktop Memory</a>
                                        </li>
                                        <li class="d-none">
                                            <a href="./products/ddrlm4.html" class="text-decoration-none text-dark">DDR4 Laptop Memory</a>
                                        </li>
                                        <li class="d-none">
                                        <a href="./products/ddrlm5.html" class="text-decoration-none text-dark">DDR4 Laptop Memory</a>
                                    </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
   
        </div>
    </nav>
        </div>`;
    $("#navbar-head").html(navbarHtml);
    let navhtml = `
<div class="ruby-menu-demo-header bg-white d-none d-lg-block">
    <!-- ########################### -->
    <!-- START: RUBY HORIZONTAL MENU -->
    <div class="ruby-wrapper container py-1">
      <button class="c-hamburger c-hamburger--htx visible-xs">
        <span>toggle menu</span>
      </button>
      <div class="row align-items-center py-lg-2">
      <div class="col-1">
      <a class="navbar-brand" href="./index.html">
        <img src="./dist/assets/imgs/anwi-logo-1.png" class="img-fluid " alt="Anwi-Logo">
      </a>
      </div>
      <div class="col-8">
      <ul class="ruby-menu d-flex align-items-center">
        <li class="ruby-menu-mega"><a href="#">Laptop</a>
        <div class="ruby-grid ruby-grid-lined border-top shadow" data_txt="laptop">
                <div class="ruby-row">
                    <ul class="d-flex justify-content-center list-inline mb-lg-2">
                        <li class="mx-3">
                            <a class="dropdown-item" href="#">
                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                    <img src="../dist/assets/imgs/Navbar/Creator-laptop.png" alt="Laptop-img" class="img-fluid mx-auto">
                                </div>
                                <div class="dropdown-item-content">
                                    <h6 class="dropdown-item-title text-center satoshi_font px-2">ZENO 14 inch Business Laptop</h6>
                                </div>
                            </a>
                        </li>
                        <li class="mx-3">
                            <a class="dropdown-item " href="#">
                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                    <img src="../dist/assets/imgs/Navbar/Business-laptop.png" alt="Laptop-img" class="img-fluid mx-auto">
                                </div>
                                <div class="dropdown-item-content">
                                    <h6 class="dropdown-item-title text-center satoshi_font px-2">ZENO 15.6 inch Business Laptop</h6>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        <span class="ruby-dropdown-toggle"></span>
        </li>
        <li class="ruby-menu-mega"><a href="#">All in One</a>
            <div class="ruby-grid ruby-grid-lined border-top shadow" data_txt="all-in-one">
                <div class="ruby-row">
                    <ul class="d-flex justify-content-center list-inline mb-lg-2">
                        <li class="mx-3">
                            <a class="dropdown-item" href="#">
                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                    <img src="../dist/assets/imgs/Navbar/Compact-cpu.png" alt="Laptop-img" class="img-fluid mx-auto">
                                </div>
                                <div class="dropdown-item-content">
                                    <h6 class="dropdown-item-title text-center satoshi_font">24 inch AIO i5</h6>
                                </div>
                            </a>
                        </li>
                        <li class="mx-3">
                            <a class="dropdown-item " href="./allinone34inch.html">
                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                    <img src="../dist/assets/imgs/Navbar/Compact-cpu.png" alt="Laptop-img" class="img-fluid mx-auto">
                                </div>
                                <div class="dropdown-item-content">
                                    <h6 class="dropdown-item-title text-center satoshi_font">34 inch AIO i7 4K</h6>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <span class="ruby-dropdown-toggle"></span>
        </li>
        <li class="ruby-menu-mega d-none"><a href="#">Servers</a>
            <div class="ruby-grid ruby-grid-lined border-top shadow" data_txt="server">
                <div class="ruby-row">
                    <ul class="d-flex justify-content-center list-inline mb-lg-2">
                    <li class="mx-3">
                            <a class="dropdown-item" href="laptopmulti.html">
                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                    <img src="../dist/assets/imgs/Navbar/Server-1.png" alt="Laptop-img" class="img-fluid mx-auto">
                                </div>
                                <div class="dropdown-item-content">
                                    <h6 class="dropdown-item-title text-center satoshi_font">Server 01</h6>
                                </div>
                            </a>
                        </li>
                        <li class="mx-3">
                            <a class="dropdown-item" href="laptopmulti.html">
                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                    <img src="../dist/assets/imgs/Navbar/Server-2.png" alt="Laptop-img" class="img-fluid mx-auto">
                                </div>
                                <div class="dropdown-item-content">
                                    <h6 class="dropdown-item-title text-center satoshi_font">Server 02 CPU</h6>
                                </div>
                            </a>
                        </li>
                        <li class="mx-3">
                            <a class="dropdown-item " href="#">
                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                    <img src="../dist/assets/imgs/Navbar/Server-3.png" alt="Laptop-img" class="img-fluid mx-auto">
                                </div>
                                <div class="dropdown-item-content">
                                    <h6 class="dropdown-item-title text-center satoshi_font">Server 03</h6>
                                </div>
                            </a>
                        </li>
                        <li class="mx-3">
                        <a class="dropdown-item " href="#">
                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                <img src="../dist/assets/imgs/Navbar/Server-4.png" alt="Laptop-img" class="img-fluid mx-auto">
                            </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 hover-zoom">
                            <img src="../dist/assets/imgs/Navbar/Server-5.png" alt="Laptop-img" class="img-fluid mx-auto">
                        </div>
                        <div class="dropdown-item-content">
                            <h6 class="dropdown-item-title text-center satoshi_font">Compact CPU</h6>
                        </div>
                    </a>
                </li>
                    </ul>
                </div>
            </div>
            <span class="ruby-dropdown-toggle"></span>
        </li>
        <li class="ruby-menu-mega d-none"><a href="#">CPU's</a>
            <div class="ruby-grid ruby-grid-lined border-top shadow" data_txt="cpu">
                <div class="ruby-row">
                    <ul class="d-flex justify-content-center list-inline mb-lg-2">
                        <li class="mx-3">
                            <a class="dropdown-item" href="laptopmulti.html">
                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                    <img src="../dist/assets/imgs/Navbar/Cpu-1.png" alt="Laptop-img" class="img-fluid mx-auto">
                                </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 hover-zoom">
                                    <img src="../dist/assets/imgs/Navbar/Cpu-2.png" alt="Laptop-img" class="img-fluid mx-auto">
                                </div>
                                <div class="dropdown-item-content">
                                    <h6 class="dropdown-item-title text-center satoshi_font">Compact CPU</h6>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <span class="ruby-dropdown-toggle"></span>
        </li>
        <li class="ruby-menu-mega-shop"><a href="#" class="nav_item" item_id="106633220000002">Accessories</a>
        <div style="height: 175px;" class="border-top shadow py-2" data_txt="Accessories">
            <div class="ruby-row">
                <ul class="d-flex justify-content-center list-inline mb-lg-2">
                    <li class="mx-3">
                        <a class="dropdown-item ram_data cursor-pointer" href="../ramproducts.html" accessories_id="106633220000007">
                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                <img src="../dist/assets/imgs/Navbar/ram_img.png" alt="Laptop-img" class="h-120p img-fluid mx-auto">
                            </div>
                            <div class="dropdown-item-content">
                                <h6 class="dropdown-item-title text-center satoshi_font px-2">RAM</h6>
                            </div>
                        </a>
                    </li>
                    <li class="mx-3">
                        <a class="dropdown-item" href="../storageproducts.html">
                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
                                <img src="../dist/assets/imgs/Navbar/ora3_ram.png" alt="Laptop-img" class="h-120p img-fluid mx-auto">
                            </div>
                            <div class="dropdown-item-content">
                                <h6 class="dropdown-item-title text-center satoshi_font px-2">Storage</h6>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <span class="ruby-dropdown-toggle"></span>
        </li>
        <li class="ruby-menu-right">
        <a class="" href="#">Support</a>
        </li>
      </ul>
      </div>
      <div class="col-3 justify-content-end">
        <ul class="d-flex align-items-center ruby-menu justify-content-end">
            <li class="ruby-menu-right mx-2">
                <img src="../dist/assets/imgs/Navbar/support-01-03.svg" class="col_sign" style="width:25px">
                <ul class="border-top shadow">
                    <li><a href="#">Sign In</a></li>
                    <li><a href="#">Sign Up</a></li>
                </ul>
                <span class="ruby-dropdown-toggle"></span>
            </li>
            <li class="ruby-menu-right mx-2">
            <a href="shopping-cart.html" class="p-0">
                <img src="../dist/assets/imgs/Navbar/support-01-04.svg" class="col_sign" style="width:100%;max-width:24px;">
            </a>
            </li>
           <!-- <li class="ruby-menu-right  mx-2">
                <a class="btn btn-dark text-white py-2 pr-3 button_dark" href="#">Get in touch</a>
            </li>-->
        </ul>
      </div>
    </div>
        </div>`;
    $(".biz-nav-wrapper").after(navhtml);
    //$("#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');
        $(".biz-nav-wrapper").removeClass("d-none");
        $(".ruby-menu-demo-header").addClass("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");
    });

    $(".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();
    $("#navbar-head")
        .find(".navbar").addClass("bg-white");
    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
            }
        }
    });

    $(".ruby-menu").find(".nav_item").each(function () {
        $(this).click(function () {
            let item_id = $(this).attr("item_id");
            let loc_path = '/products.html'
            if (window.location.pathname.includes(loc_path)) {
                window.location.href = `?products`
            }
            else {
                window.location.href = `/products.html?products`;
            }
        })
    });

    $("a.ram_data").click(function () {
        let item_id = $(this).attr("accessories_id");
        let loc_path = '/products.html'
        if (window.location.pathname.includes(loc_path)) {
            window.location.href = `?itemid=${item_id}`
        }
        else {
            window.location.href = `/products.html?itemid=${item_id}`;
        }
    })

    // destroy localstorage data
    let loc_path = '/productdetails.html';
    if (window.location.pathname.includes(loc_path) === false) {
        localStorage.removeItem("product_data")
    }
});