JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body>

	<div class="navbox">
		<div class="navbar divmiddle">
			<ul>
				<li id="section1dot" class="navlist navdot-blank">
					<div class="dothover"></div><a href="#section1" id="section1text" class="navtext-fadeout">Step 1</a>
				</li>
				<li id="section2dot" class="navlist navdot-blank">
					<div class="dothover"></div><a href="#section2" id="section2text" class="navtext-fadeout">Step 2</a>
				</li>
				<li id="section3dot" class="navlist navdot-blank">
					<div class="dothover"></div><a href="#section3" id="section3text" class="navtext-fadeout">Step 3</a>
				</li>
				<li id="section4dot" class="navlist navdot-blank">
					<div class="dothover"></div><a href="#section4" id="section4text" class="navtext-fadeout">Step 4</a>
				</li>
				<li id="section5dot" class="navlist navdot-blank">
					<div class="dothover"></div><a href="#section5" id="section5text" class="navtext-fadeout">Step 5</a>
				</li>
				<li id="section6dot" class="navlist navdot-blank">
					<div class="dothover"></div><a href="#section6" id="section6text" class="navtext-fadeout">Step 6</a>
				</li>
				<li id="section7dot" class="navlist navdot-blank">
					<div class="dothover"></div><a href="#section7" id="section7text" class="navtext-fadeout">Step 7</a>
				</li>
				<li id="section8dot" class="navlist navdot-blank">
					<div class="dothover"></div><a href="#section8" id="section8text" class="navtext-fadeout">Step 8</a>
				</li>
			</ul>
		</div>
	</div>


	<!--	CONTAINER STARTS-->
	<div class="container">
		<div class="container2">
			<!--		GRID LAYOUT STARTS-->
			<div class="row" id="section1">
				<div class="col-xs-12">
					<h1 class="centred caps">The Journey</h1>
					<p>Twitter Blog listicle mumblecore you probably haven't heard of them bitters, pug taxidermy YOLO Thundercats vinyl brunch yr artisan forage. Kogi you probably haven't heard of them locavore Williamsburg,...

CSS

/*MAIN CONTAINER OVERRIDES*/

.container {
	min-width: 688px;
	max-width: 688px;
	z-index: 2;
	position: relative;
	left: 15px;
	padding: 0;
	width: -moz-calc(100% - 30px);
	width: -webkit-calc(100% - 30px);
	width: calc(100% - 30px);
	background-color: white;
	overflow: hidden;
    background-color:grey;
}

.container2 {
	position: relative;
	left: 0px;
	width: 688px;
    background-color:aqua;
}

.container-push {
	left: 100px;
}

.container,
.container2,
.container-push {
	-webkit-transition: left 0.5s ease;
	-moz-transition: left 0.5s ease;
	transition: left 0.5s ease;
}
/*NAVIGATION MENU*/
/*NAVIGATION BOX BACKGROUND*/

.navbox {
	position: fixed;
	height: 340px;
	width: 0px;
	overflow: visible;
	z-index: 6;
	padding: 0;
	/*	background-color: rgba(0, 0, 0, 0.7);*/
	/*	opacity: 0;*/
	
	vertical-align: middle;
	display: inline;
}

.navbox-fade {
	z-index: 2;
	opacity: 1;
}

.navbox,
.navbox-fade {
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
/*NAVIGATION TEXT AND BULLETS WITH GHOST CENTRE FIX*/

.ghost-center {
	position: relative;
}

.ghost-center::after {
	content: "";
	display: inline-block;
	height: 340px;
	width: 0px;
	vertical-align: middle;
}

.ghost-center ul {
	display: inline-block;
	vertical-align: middle;
}

.navbar {
	position: fixed;
	left: 0px;
	/*	width: 110px;*/
	
	height: 340px;
	text-align: left;
	top: 50%;
	margin-top: -170px;
	vertical-align: middle;
}

.navbar ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	left: 0;
}

.navdot-blank {
	background-image: url(../test_images/dot-blank.png);
}

.navdot-fill {
	background-image: url(../test_images/dot-filled.png);
}

.navlist {
	width: 140px;
	opacity: 1;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: 10px 10px;
	padding: 10px 20px 10px 40px;
	vertical-align: middle;
}

.navlist:hover {
	background-color: rgb(237, 185, 247);
}

.dothover {
	height: 20px;
	width: 20px;
	margin-left:...

JavaScript

//INITIALISE 
$(document).ready(function () {

	$(".navlist").hover(function () {
		$(".container2").toggleClass("container-push");
		$(".navtext-fadeout").toggleClass("navtext-fadeup");
	});
});