I am interested in adding a vertical navigation bar to my page using bootstrap. Specifically, I would like it to be positioned on the left side between my header and footer. Additionally, there is some text that needs to remain in a fixed position. What is the most effective way to achieve this? Any suggestions?
Below are the HTML/CSS codes I have implemented:
<!DOCTYPE html>
<html lang="en">
<head>
<title>xxx</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 160px;
}
footer {
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 140px;
background-color:#555;
}
hr {
height: 1px;
background-color:#555;
margin-top: 30px;
margin-bottom: 30px;
width: 100%;
}
.custom{
color: white;
background-color:black;
height: 85px;
}
</style> </head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Test</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class='active'><a href="#">Home</a></li>
<li><a href="#"> Team</a></li>
<li><a href="#">Help</a></li>
</ul></div></nav>
<div class="row">
<div class="col-sm-12 custom">
<h2><strong>Test -test-test</strong></h2>
<h4>bla bla bla</h4>
</div></div><BR>
<div class="container">
<p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
<p class="text-justify">Some textSome textvvSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
<p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
<p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
<p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
<p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
<p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<image style="height:80px" src="/footer_image/Logo.gif"></image>
</div></div></div> </footer>
</body>
</html>
Thank you, Clarissa