<nav class="navbar navbar-expand-lg navbar-dark nivid" style="padding-left: 20%; padding-right: 20%;">

​

  <a class="navbar-brand" href="index.php"><img src="/assets/logo.svg" height="45px"/></a>

​

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"

    aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

​

  <div class="collapse navbar-collapse" id="navbarSupportedContent2">

​

    <ul class="navbar-nav mr-auto">

​

      <!-- Diensten -->

      <li class="nav-item dropdown mega-dropdown" style="margin-right: 2em;">

        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink2" data-toggle="dropdown"

          aria-haspopup="true" aria-expanded="false">Diensten

          <span class="sr-only">(current)</span>

        </a>

        <div class="dropdown-menu mega-menu v-2 z-depth-1 py-5 px-3 nivid-sec" style=""

          aria-labelledby="navbarDropdownMenuLink2" style="color: rgba(255, 255, 255, 0.70) !important;">

          <div class="row ma" style="width: 65%;">

            <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-3">

              <h5 class="sub-title text-uppercase nivid-sec-text" style="font-size: 1em;"><i class="fas fa-server"></i> Hosting</h5>

              <ul class="list-unstyled">

                <li>

                  <a class="menu-item pl-0" href="/hosting.php">

                    E-mail / Web hosting

                  </a>

                </li>

​

              </ul>

            </div>

            <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-3">

              <h5 class="sub-title text-uppercase nivid-sec-text" style="font-size: 1em;"><i class="fas fa-code"></i> Websites</h5>

              <ul class="list-unstyled">

                <li>

                  <a class="menu-item pl-0" href="/web-design.php">

                    Web design

                  </a>

                </li>

                <li>

                  <a class="menu-item pl-0" href="/aio-website.php">

                    All-In-One Website

                  </a>

                </li>

                <li>

                  <a class="menu-item pl-0" href="/student-web-deal.php">

                    Student Web Deal

                  </a>

                </li>

              </ul>

            </div>

            <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-3">

              <h5 class="sub-title text-uppercase nivid-sec-text" style="font-size: 1em;"><i class="fas fa-microchip"></i> Hardware</h5>

              <ul class="list-unstyled">

                <li>

                  <a class="menu-item pl-0" href="#!">

                    Custom PC/Workstation

                  </a>

                </li>

​

              </ul>

            </div>

            <div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-3">

              <h5 class="sub-title text-uppercase nivid-sec-text" style="font-size: 1em;"><i class="far fa-life-ring"></i> Servicing</h5>

              <ul class="list-unstyled">

                <li>

                  <a class="menu-item pl-0" href="#!">

                    Herstellingen en onderhoud

                  </a>

                </li>

                <li>

                  <a class="menu-item pl-0" href="#!">

                    Windows Troubleshooting

                  </a>

                </li>

              </ul>

            </div>

          </div>

        </div>

      </li>

      <!-- PORTFOLIO -->

      <li class="nav-item dropdown mega-dropdown" style="margin-right: 2em;">

        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink3" data-toggle="dropdown"

          aria-haspopup="true" aria-expanded="false">Portfolio</a>

        <div class="dropdown-menu mega-menu v-2 z-depth-1 nivid-sec py-5 px-3" style=""

          aria-labelledby="navbarDropdownMenuLink3">

          <div class="row ma" style="width: 65%;">

            <div class="col-md-12 col-xl-12 sub-menu mb-xl-0 mb-12">

            <h5 class="sub-title text-uppercase nivid-sec-text" style="font-size: 1em;">Webdesign</h5>

       <!-- Content -->

          </div>

        </div>

      </li>

      <li class="nav-item" style="margin-right: 2em;">

        <a class="nav-link" href="/over-nivid.php">Over Nivid</a>

      </li>

      <li class="nav-item" style="margin-right: 2em;">

        <a class="nav-link" href="#">Contact</a>

      </li>

​

    </ul>

​

​

  </div>

​

​

</nav>

.nivid {

    background-color: #0071c5 !important;

}

​

.nivid .accent {

    background-color: #71adff !important;

}

​

​

.nivid-sec {

    background-color: #2b2b2b !important;

}

​

.nivid-sec-text {

    color: #3a9fea;

    text-shadow: 1px 1px #000000d4;

}

​

​

.navbar .mega-dropdown .dropdown-menu.mega-menu .sub-menu .sub-title {

    border-bottom: 1px solid #495056 !important;

}

​

.badge-nivid-light {

    color: #3e3e3e!important;

    background-color: #f1f1f1;

    box-shadow: none;

}

​

​

.container-fluid {

    padding-right: 0px !important;

    padding-left: 0px !important;

}

​

.nm {

    margin-left: 0px !important;

    margin-right: 0px !important;

}

​

.np {

    padding-right: 0px !important;

    padding-left: 0px !important;

}

​

.ma {

    margin-left: auto;

    margin-right: auto;

}

​

$('.mega-menu').click((e)=>{

console.log($('.mega-menu').get(0));

​

console.log(e.target);

if(e.target == $('.mega-menu').get(0))

e.stopPropagation();

});