template1-float

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>With float</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet">

<style type="text/css">
.topnav, .sidenav {
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
}

.topnav {
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  background-color: #5f5f5f;
  color: #f1f1f1;
  padding: 0;
  overflow: hidden;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  line-height: 1;
}

.sidenav {
  position: fixed;
  top: 44px;
  z-index: 1;
  width: 200px;
  height: calc(100vh - 44px);
  background-color: #f1f1f1;
  overflow-x: hidden;
  padding: 20px 0;
}

.sidenav a {
  display: block;
  text-decoration: none;
  padding: 8px;
  color: black;
  font-size: 15px;
  line-height: 1;
}

.topnav a:hover,
.sidenav a:hover {
  background-color: #cccccc;
  color: black;
}

.topnav a.active,
.sidenav a.active {
  background-color: #3498db;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav.responsive + .sidenav {
    top: 0;
  }
}

@media screen and (max-width: 700px) {
  .sidenav {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0;
  }
  .sidenav a {float: left;}
  div.main {margin-left: 0;}
}
 @media screen and (max-width: 400px) {
  .sidenav a {
    text-align: center;
    float: none;
  }
}

.main {
  margin-left: 200px;
  padding: 54px 20px 20px 20px;
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about" style="float:right">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div class="sidenav">
  <a href="#" class="active">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
</div>

<div class="main">
  <h2>Sidenav Example</h2>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

<script type="text/javascript">
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

</body>
</html>