JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <section class="nav-container clearfix">
    <nav class="nav-main">
      <ul class="clearfix">
        <li class="toggle item"><a href="#">MENU</a></li>
        <li class="item"><a href="">link1</a></li>
        <li class="item"><a href="">link2</a></li>
        <li class="item"><a href="">link3</a></li>
      </ul>
    </nav>
  </section>
  <div class="hero">
  <h1>
  Hero image is here
  <p>
  So the nav is small to focus on the hero img
  </p>
  </h1>
  <div class="content">
  <h1>
  content here <p>
  
  so nav becomes more important</p>
  </h1>
  </div>
  </div>
</body>

CSS

.hero>h1, .content>h1 {
  text-align:center;
  background-color:red;
  height:500px;
  padding-top:200px;
}
.content>h1{
  background-color:grey;
}
.hero>h1>p, .content>h1>p {
  font-size:15px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height:1500px;
}

a {
  text-decoration: none;
}

.clearfix::after {
  display: block;
  content: '';
  clear: both;
}




/* nav initial */
.nav-container {
  display: block;
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
  padding: 25px 25px 15px;
  -webkit-transition: .8s;
  transition: .8s;
}

.nav-main {
  display: block;
  float: right;
  padding: 0 3rem;
  border-radius: 100px;
  background-color: #fff;
    
  font-family: hitroad;
  text-transform: uppercase;
    
  overflow: hidden;
    
  -webkit-transition: .8s;
  transition: .8s;
}

.nav-main .item {
  display: block;
  float: left;
  max-width: 0;
  opacity: 0;
  -webkit-transition: .8s;
  transition: .8s;
  /* limit width */
  overflow: hidden;
  line-height: 3em;
}

.nav-main .item a {
  display: block;
  margin: 0 auto;
}

.nav-main .toggle {
  max-width: 200px;
  opacity: 1;
  -webkit-transition: .6s .4s;
  transition: .6s .4s;
}





/* nav hover */
.nav-main:hover .item {
  max-width: 200px;
  opacity: 1;
}

.nav-main:hover .item + .item {
  margin-left: 20px;
}

.nav-main:hover .toggle {
  max-width: 0;
  opacity: 0;
  -webkit-transition: .1s;
  transition: .1s;
}





/* nav full-width */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.full {
  background: #fff;
  padding-top: 15px;
}

.full .nav-main {
  animation: blink .8s;
}

.full .nav-main .item {
  max-width: 200px;
  opacity: 1;
}

.full .nav-main .item + .item {
  margin-left: 12vw;
}

.full .nav-main .toggle {
  max-width: 0;
  opacity: 0;
  -webkit-transition: .1s;
  transition: .1s;
}

JavaScript

(function() {
	
    var $window = $( window ),
        $navContainer = $( '.nav-container' ),
    		navShiftBreakpoint = 500; // px, when to change nav layout

	  $window.scroll(function() {
  
		if ($window.scrollTop() > navShiftBreakpoint) {
    	$navContainer.addClass( 'full' );
      
		} else {
  		$navContainer.removeClass( 'full' );
  	};
    
	});
})(jQuery);