JSFiddle - React, Tailwind, and code Playground

by Alan Tsai

HTML

<body>

  <div class="container">
    <nav class="bottom" id="nav">
      <div class="buttonWrapper">
        <a href="#about">
          <div class="navButton">About</div>
        </a>
        <a href="#designs">
          <div class="navButton">Designs</div>
        </a>
        <a href="#contact">
          <div class="navButton">Contact</div>
        </a>
      </div>
    </nav>
    <div class="largeLogo"></div>
  </div>
  <div class="container about" id="about">
    <div class="sideBar about">
      <div class="sidebarText"></div>
      <p></p>
    </div>
  </div>

  <div class="container designs" id="designs">
    <div class="view view-ninth">
      <img src="images/11.jpg" />
      <div class="mask mask-1"></div>
      <div class="mask mask-2"></div>
      <div class="content">
        <h2>Hover Style #9</h2>
        <p>Some Text</p>
        <a href="#" class="info">Read More</a>
      </div>
    </div>
    <div class="sideBar designs">
      <div class="sidebarText"></div>
    </div>
  </div>

  <div class="container contact" id="contact">
    <div class="sideBar contact">
      <div class="sidebarText"></div>
    </div>
  </div>

</body>

CSS

/* General */

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  background-color: #333333;
  font-family: 'Segoe UI light', 'Arial Narrow', Arial, sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  position: relative;
  padding-top: 40px;
}


/* ***Menu CSS*** */


/* -------------------------------------------
	Nav bar 
------------------------------------------- */

nav {
  background-color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  text-align: center;
  z-index: 2;
  font-family: 'Segoe UI light', 'Arial Narrow', Arial, sans-serif;
}

nav.bottom {
  position: absolute;
  top: auto;
  bottom: 0;
}

nav.minimize {
  height: 40px;
}

nav a {
  text-decoration: none;
}

nav .navButton {
  display: inline-block;
  color: #50C0C0;
  line-height: 60px;
  padding: 0 20px;
  position: relative;
}

nav.minimize .navButton {
  line-height: 40px;
}

nav .navButton:hover {
  color: orange;
}

nav .navButton:after {
  content: "";
  transition: width .5s, left .5s;
  -webkit-transition: width .5s, left .5s;
  -moz-transition: width .5s, left .5s;
  -o-transition: width .5s, left .5s;
  width: 0;
  left: 50%;
}

nav .navButton:hover:after {
  content: "";
  left: 20%;
  height: 1.5px;
  width: 60%;
  background-color: #50C0C0;
  position: absolute;
  bottom: 0;
  box-shadow: 0 -3px 15px #ffffff;
}


/* div around all nav buttons */

nav .buttonWrapper {
  display: inline-block;
  text-align: center;
}

nav .buttonWrapper a:nth-child(1) .navButton:before,
nav .buttonWrapper a:nth-child(2) .navButton:before {
  content: "";
  position: absolute;
  top: 17px;
  right: 0;
  width: 1px;
  height: 26px;
  background-color: #828282;
}

nav.minimize .buttonWrapper a:nth-child(1) .navButton:before,
nav.minimize .buttonWrapper a:nth-child(2) .navButton:before {
  top: 7px;
}


/*...

JavaScript

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

window.addEventListener("scroll", navTop, false);

function navTop() {
  var nav = document.getElementById("nav");
  var about = document.getElementById("about").offsetTop - 1;
  var bodyOffset = document.documentElement.scrollTop || document.body.scrollTop;
  if (bodyOffset > about) {
    nav.className = "minimize";
  } else {
    nav.className = "bottom";
  }
}