JSFiddle - React, Tailwind, and code Playground

by NUJ88

HTML

<!DOCTYPE html>
<html lang="da">

  <head>
    <title>A/S</title>
    <link rel="icon" href="./Images/favicon.ico" type="image/x-icon" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="Stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="Jquery.js"></script>
  </head>

  <body>

    <nav class="navbar navbar-expand-lg fixed-top">
      <!--Logo & return home -->
      <a class="navbar-brand" href="#"><img src="#" alt="Logo" style="width:220px;"></a>

      <!-- Collaps / burger menu -->
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".collapsible-navbar">
        <span><i class="fa fa-bars" style="color:#005eb8; font-size:35px;"></i></span>
        <span class="sr-only">Toggle navigation</span>
      </button>

      <div class="collapse navbar-collapse collapsible-navbar">
        <!-- Navigation links -->
        <ul class="nav navbar-nav flex-shrink-1 flex-nowrap mr-auto">
          <li class="nav-item p-1 ml-4 mr-2">
            <a class="nav-link" href="#">Nyheder</a>
          </li>
          <li class="nav-item p-1 mx-2">
            <a class="nav-link" href="#">Kraner</a>
          </li>
          <li class="nav-item p-1 mx-2">
            <a class="nav-link" href="#">Løftegrej</a>
          </li>
          <li class="nav-item p-1 mx-2">
            <a class="nav-link" href="#">Service</a>
          </li>
          <li class="nav-item p-1 mx-2">
 ...

CSS

body,
html {
  font-family: Verdana;
  height: 100%;
  margin: 0;
}

/*End baggrund */


/* change the nav color */
.navbar {
  background-color: white;
}

/* change the color of active or hovered links */

.nav-link,
.dropdown-item {
  color: #005eb8 !important;
  font-weight: bold;
}

.nav-link:hover,
.nav-link:active {
  color: #0081f9 !important;
}

/* end nav-color change */

/* dropdowns on hover*/
.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
  pointer-events: none;
}

/* Nav underline */
nav li {
  text-align: center;
  text-transform: uppercase;
}

li>a:after {
  content: '';
  display: block;
  height: 1.5px;
  background: #00396e;
  transform: scaleX(0);
  transition: transform .3s;
}

li>a:hover:after {
  transform: scaleX(1);
  transition: transform .3s;
}

.active {
  color: #3ba0ff !important;
}

.dropdown-item {
  text-transform: uppercase;
}

.dropdown-item:after {
  content: '';
  display: block;
  height: 1.5px;
  background: #00396e;
  transform: scaleX(0);
  transition: transform .3s;
}

.dropdown-item:hover:after {
  transform: scaleX(1);
  transition: transform .3s;
}

.active {
  color: #3ba0ff !important;
}

/* End nav underline */

/* form control dropdown menu */
.navbar .dropdown-menu .form-control {
  width: 100%;
  min-width: 20em;
}


/* button change */
.btn {
  padding: 14px 24px;
  border: 0 none;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: 0 none;
  border: 0 none;
}

.btn-primary {
  background: #005eb8;
  color: #ffffff;
  outline: 0 none;
  border: 0 none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
  background: #00396e;
  outline: 0 none;
  border: 0 none;
}

.btn.sharp {
  border-radius: 0;
}

/* page content*/

JavaScript

// active nav links on click. 

$(document).ready(function() {
  $('ul li a').click(function() {
    $('li a').removeClass("active");
    $(this).addClass("active");
  });
});

$('.navbar-nav>li>a').on('click', function() {
  $("div").not("#navDropdown")
  $('.navbar-collapse').collapse('hide');
});