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://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top" role="navigation">
        	<div class="container">
            	<div class="navbar-header page-scroll">
                	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    	<span class="sr-only">Toggle navigation</span><span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span>
                </button>
                	<a class="navbar-brand page-scroll" href="#page-top">
                     Logo
                    </a>
            	</div>

            	<!-- Collect the nav links, forms, and other content for toggling -->
            	<div class="collapse navbar-collapse navbar-ex1-collapse">
                	<ul class="nav navbar-nav">
                    	<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    	<li class="hidden">
                        	<a class="page-scroll" href="#page-top"></a>
                    	</li>
                    	<li>
                        	<a class="page-scroll" href="#page-top">Home</a>
                    	</li>
                        <li>
                        	<a class="page-scroll" href="#services">Services</a>
                    	</li>
                    	<li>
                        	<a class="page-scroll" href="#elements">Elements</a>
                    	</li>
                    	<li>
                        	<a class="page-scroll" href="#price">Price</a>
                    	</li>
                     ...

CSS

section{ height:300px}

/* navigation */
.navbar-default {
  background:rgba(255,255,255,1);
  border-color: rgba(34, 34, 34, 0.05);
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}

.navbar-default .navbar-header .navbar-toggle {
  font-weight: 700;
  font-size: 12px;
  color: #222222;
  text-transform: uppercase;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
  font-family: 'Hind Madurai','Segoe UI','Helvetica Neue', sans-serif;	
  text-transform: uppercase;
  font-weight:600;
  font-size: 13px;
  color: #222222;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
  color:#2e71f2;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
  color:#2e71f2 !important;
  background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
  background-color: transparent;
}
@media (min-width: 768px) {
  .navbar-default {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0);
  }

  .navbar-default .nav > li > a,
  .navbar-default .nav > li > a:focus {
    color: rgba(0, 0, 0, 0.5);
  }
  
  .navbar-default .nav > li > a:hover,
  .navbar-default .nav > li > a:focus:hover {
    color: rgba(0, 0, 0, 1);
  }
  
  .navbar-default.affix {
    background-color: white;
    border-color: rgba(34, 34, 34, 0.05);
  }
  
  .navbar-collapse {
	  float:right;
  }
  
}

@media (max-width: 768px) {
  .navbar-default .nav > li > a,
  .navbar-default .nav > li > a:focus {
	  border-bottom:solid 1px #EEEEEE;
  }
  
  .navbar-default .nav {
	  margin-bottom:0px;
  }
}

JavaScript

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
	
	// jQuery for page scrolling feature - requires jQuery Easing plugin
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

    // Highlight the top nav as scrolling occurs
    $('body').scrollspy({
        target: '.navbar-fixed-top',
        offset: 51
    });

    // Closes the Responsive Menu on Menu Item Click
    $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() {
        $('.navbar-toggle:visible').click();
    });
	
	// Offset for Main Navigation
    $('#mainNav').affix({
        offset: {
            top: 500
        }
    });
    
});