bars-style.css

      /*This is the styling file to be included on by reference on every page in the site */  
	/* The CSS sidebar */
.sidebar {
	height: 100%; /* Full Height */
	width: 0; /* 0 width - change this with javascript*/
	position: Fixed; /*Stay in Place*/
	z-index: 1 ; /*Stay on top*/
	top:0;
	left:0;
	background-color: #111; /*Black*/
	overflow-x: hidden; /*Disable Horizontal Scroll*/
	padding-top: 60px; /* Place content 60 px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
/* The Sidebar links */
.sidebar a {
	padding: 8px 8px 8px 32px;
	text-decoration:none;
	font-size: 25px;
	color: #818181;
	display: block;
	transition: 0.3s;

}

/*When you move over the navigation links, change their color */
.sidebar a:hover {
	color: #f1f1f1;
}

/*Position and style the close button (top right corner) */
.sidebar .closebtn{
	position: absolute;
	top:0;
	right: 25px;
	font-size: 36px;
	margin-left:50px;
}
/*The button used to open the bar */
.openbtn{
	position:absolute;
	top:5px;
	left:0px;
	font-size: 20px;
	cursor: pointer;
	background-color: #111;
	color:white;
	padding: 10px 15px;
	border: none;
}
.openbtn:hover{
	background-color:#444;
}
/*Style page content-  */
#main {
	transition: margin-left .5s; /* if you want a transition effect */
	padding:20px;
}
/* On smaller screens, where height is less than 450 px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px){
	.sidebar {padding-top: 15px;}
	.sidebar a {font-size: 18px;}
}

/*Navigation Bar*/

/* Add a background color to the top navigation bar */ 
.topnav {
  position:absolute;
  size:10px 500px ;
	top:5px;
	left:135px;
	overflow: hidden;
  background-color: #e9e9e9;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the "active" element to highlight the current page */
.topnav a.active {
  background-color: #FFFF00;
  color: black;
}

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
  float: left;
  padding: 6px 200px;
  border: none;
  margin-top: 8px;
  margin-left: 16px;
	margin-right:16px;
  font-size: 17px;
}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}