JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
<nav id="thatnav">
	<div class="myleisure" >
		<a>my Leisure</a>
	</div>
	<ul id="navmenu" >
		<li class="active"><a href="#splash"><i style="padding-right: 5px;" class="fa fa-home"></i>Home</a><div></div></li>
		<li><a href="#about">Ordering</a><div></div>
			<ul>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
			</ul>
		</li>
		<li><a href="#designs" target="_blank">Designs</a><div></div></li>
		<li><a href="#hotels-resorts" target="_blank">Hotels / Resorts</a><div></div></li>
	</ul>
		
</nav>
			
			
<section style="background: rgba(50,50,50,1)" id="splash">
	<div class="container-fluid">
		<div class="row row-centered">
			<div style="color: #fff;" class="col-lg-8 col-centered">
				<h3 class="custom-h2">..now, about your Leisure</h3>
				<p class="custom-p">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales sit amet magna in ultricies. In hac habitasse platea dictumst. Sed finibus, purus quis pellentesque suscipit, magna ipsum vulputate tortor, quis vehicula elit leo convallis erat. Suspendisse in dui bibendum diam facilisis suscipit ut tristique enim. Fusce eget lobortis odio. Ut non tortor ut mauris fermentum cursus eu ut eros. 
				</p>
			</div>
		</div>
	</div>
</section>

<section style="background: rgba(50,50,50,1)" id="about">
	<div class="container-fluid">
		<div class="row row-centered">
			<div style="color: #fff;" class="col-lg-8 col-centered">
				<h3 class="custom-h2">..now, about your Leisure</h3>
				<p class="custom-p">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales sit...

CSS

@import "https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900&subset=latin-ext";
.no-side-padding {
  padding-right: 0;
  padding-left: 0; }

body {
  position: relative; }

nav {
  position: fixed;
  background-color: #fff;
  width: 100vw;
  z-index: 999; }
  nav ul {
    float: right;
    font-size: 0px;
    padding: 0;
    margin: 0;
    color: #337ab7;
    position: relative;
    z-index: 9999; }
    nav ul .current-top-menu-item {
      box-shadow: 0px 4px 0px #36B8C8; }
      nav ul .current-top-menu-item a {
        color: #204E76; }
    nav ul .top-menu-collapsed {
      padding: 20px 19px; }
    nav ul * {
      -webkit-transition: all 170ms ease-out;
      -moz-transition: all 170ms ease-out;
      -ms-transition: all 170ms ease-out;
      transition: all 170ms ease-out; }
    nav ul li {
      display: inline-block;
      font-family: "Raleway", sans-serif;
      text-decoration: none;
      font-size: 1.6rem;
      text-transform: capitalize;
      font-weight: 600;
      position: relative;
      padding: 30px 24px;
      z-index: 9999; }
      nav ul li a {
        position: static; }
        nav ul li a:hover, nav ul li a:active, nav ul li a:focus, nav ul li a:visited {
          text-decoration: none; }
      nav ul li div {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 666666;
        width: auto;
        height: auto;
        margin: 22px 24px;
        padding: 0;
        background-color: rgba(0, 0, 0, 0.5); }
      nav ul li ul {
        
        margin-top: 4px;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        padding: 0;
        width: 100%;
        z-index: 999; }
        nav ul li ul li {
          z-index: 999;
          text-align: center;
          float: none;
          width: 100%;
          padding: 8px 0px;
          display: block; }
      nav ul li:hover, nav ul li:active {
        z-index: 9999;
       ...

JavaScript

$(document).ready(function(){

  // Cache selectors
  var lastId,
      topMenu = $("#navmenu"),
      topMenuHeight = topMenu.outerHeight(),
      // All list items
      menuItems = topMenu.find("a"),
      // Anchors corresponding to menu items
      scrollItems = menuItems.map(function(){
        var item = $($(this).attr("href"));
        if (item.length) { return item; }
      });


  // Bind click handler to menu items
  // so we can get a fancy scroll animation
  menuItems.click(function(e){
    var href = $(this).attr("href"),
        offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
    $('html, body').stop().animate({ 
        scrollTop: offsetTop
    }, 300);
    e.preventDefault();
  });  

  
  function setSize() {    
    var navHeight = $("#navmenu").outerHeight(true);
    var fromTop = $(window).scrollTop()+navHeight; 
    $("nav div a").css({"height" : navHeight + "px","line-height" : navHeight + "px"});
  };

  function changeSize() {
    var action = 220;    
    var navHeight = $("#navmenu").outerHeight(true);
    var fromTop = $(window).scrollTop()+navHeight; 


    if (fromTop > action) {
      $("nav li").addClass("top-menu-collapsed");
    }
    else if (fromTop <= action) {
      $("nav li").removeClass("top-menu-collapsed");
    };

    $("nav div a").css({"height" : navHeight + "px","line-height" : navHeight + "px"});
   }; 

  function changeActiveMenu() {
    var navHeight = $("#navmenu").outerHeight(true);
    var fromTop = $(window).scrollTop()+navHeight;

    var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
    });

    cur = cur[cur.length-1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("current-top-menu-item")
         .end().filter("[href='#"+id+"']").parent().addClass("current-top-menu-item");
    }; 
  };

  setSize();
 ...