Bootstrap 3 - how to create responsive fixed right menu, with scroll - html

Question

In the next image you can see what I want to achieve:
Desktop
Mobile
How can I do this?
I've been trying something like this:
<div class="row">
<div class="col-md-10">
<div class="row">
<div class="col-md-10" style="overflow:auto;">
<h1>Profile</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ligula tincidunt eros eleifend porttitor. Maecenas cursus volutpat erat.
</p>
</div>
<!--feeds-->
<div class="col-md-2">
<h3>-- Feeds --</h3>
</div>
</div>
</div>
<!--fixed menu-->
<div class="col-md-2" style="background-color:#2ecc71;padding:3px;">
<div class="text-center">
<img src="/img/1.png" class="img-circle" style="max-width:150px">
<h3>hi!</h3>
</div>
<div>
<!-- menu links -->
</div>
</div>
</div>
Thanks in advance.

Answer 1

I believe this is what you're trying to do. You could use the default Bootstrap navbar by changing it's position rules (position: fixed;) to suit your needs while inside of a media query so once you're below 768px your nav adjusts to the default toggle nav. See Navbar for reference.
Working Example: Open at full page and reduce the viewport.
html,
body {
height: 100%;
}
#media (max-width: 767px) {
body {
padding-top: 50px;
}
}
#media (min-width: 768px) {
.navbar.sidebar-nav {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: auto;
height: 100%;
width: 200px;
background: #222;
overflow-y: auto;
}
.navbar.sidebar-nav .navbar-header {
width: 100%;
}
.navbar.sidebar-nav .navbar-header .navbar-brand {
float: right;
}
.navbar.sidebar-nav .navbar-nav {
width: 100%;
height: 100%;
text-align: right;
}
.navbar.sidebar-nav .navbar-nav > li {
float: none;
display: block;
}
.main-content {
margin-right: 200px;
}
}
/*THUMBNAIL FOR DEMO ONLY*/
.thumbnail {
border: none;
border-radius: 0px;
background: rgba(255, 255, 255, 0.75);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.20);
padding: 25px;
max-width: 500px;
margin: 12.5px auto;
}
/*THUMBNAIL FOR DEMO ONLY*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top sidebar-nav">
<div class="container-fluid">
<div class="navbar-header">
<button data-toggle="collapse" type="button" class="navbar-toggle collapsed" data-target="#bs-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar Brand</a>
</div>
<div class="navbar-collapse collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>Link Five
</li>
</ul>
</div>
</div>
</nav>
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/000/000" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>