index.html

<!DOCTYPE html>
<html>
	<head>
	   <link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
	   <link href="css/menu_styles.css" type="text/css" rel="stylesheet" />
	   <link rel="stylesheet" type="text/css" href="css/component.css" />
	   <link href="css/styles.css" type="text/css" rel="stylesheet" />
	   <script src="js/modernizr.custom.js"></script>
	</head>

	<body class="cbp-spmenu-push home">
		<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
			<a href="index.html">Home</a>
			<a href="al_sughra.html">Al-Sughra</a>
			<a href="#">Al-Kubra</a>
			<a href="#">About</a>
		</nav>
		<section class="buttonset">
			<button id="showLeftPush" type="button" class="btn btn-default" aria-label="Left Align">
			  <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
			</button>
		</section>
		<div class="home_page container">
			<section id = "logo">
				<img src="img/logo.png">
			</section>
			<section id="home_button_box">
				<ul>
					<li class="home_buttons"><a href="al_sughra.html">Al-Sughra</a></li>
					<li class="home_buttons"><a href="#">Al-Kubra</a></li>
					<li class="home_buttons"><a href="#">About</a></li>
				</ul>
				<!--<button type="button" class="home_buttons">As-Sughra</button>-->
				<!--<button>Al-Kubra</button>-->
				<!--<button>About</button>-->
			</section>		
		</div>
		
		<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
		<script src="js/classie.js"></script>
		<script>
			var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
				showLeftPush = document.getElementById( 'showLeftPush' ),
				body = document.body;
		
				showLeftPush.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( body, 'cbp-spmenu-push-toright' );
				classie.toggle( menuLeft, 'cbp-spmenu-open' );
				disableOther( 'showLeftPush' );
			};
		</script>
	</body>


</html>