<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row">
<!-- uncomment code for absolute positioning tweek see top comment in css -->
<!-- <div class="absolute-wrapper"> </div> -->
<!-- Menu -->
<div class="side-menu">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="brand-wrapper">
<!-- Hamburger -->
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand -->
<div class="brand-name-wrapper">
<a class="navbar-brand" href="#">
Social Network
</a>
</div>
<!-- Search -->
<a data-toggle="collapse" href="#search" class="btn btn-default" id="search-trigger">
<span class="glyphicon glyphicon-search"></span>
</a>
<a data-toggle="collapse" href="#contacts" class="btn btn-default" id="contacts-trigger">
<span class="glyphicon glyphicon-user"></span>
</a>
<div id="contacts" class="panel-collapse collapse">
<div class="panel-body">
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" id="contact-list-search" placeholder="Search contacts">
</div>
</form>
<div class="row">
<div class="panel panel-default">
<div class="row" style="display: none;">
<div class="col-xs-12">
<div class="input-group c-search">
<input type="text" class="form-control" id="contact-list-search">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
<ul class="list-group" id="contact-list">
<li class="list-group-item">
<div class="col-xs-12 col-sm-3">
<img src="http://api.randomuser.me/portraits/men/49.jpg" alt="Scott Stevens" class="img-responsive img-circle" />
</div>
<div class="col-xs-12 col-sm-9">
<span class="name">Scott Stevens</span><br/>
<span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5842 Hillcrest Rd"></span>
<span class="visible-xs"> <span class="text-muted">5842 Hillcrest Rd</span><br/></span>
<span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(870) 288-4149"></span>
<span class="visible-xs"> <span class="text-muted">(870) 288-4149</span><br/></span>
<span class="glyphicon glyphicon-envelope c-info" data-toggle="tooltip" title="scott.stevens@example.com"></span>
<span class="visible-xs"> <span class="text-muted">scott.stevens@example.com</span><br/></span>
</div>
<div class="clearfix"></div>
</li>
<li class="list-group-item">
<div class="col-xs-12 col-sm-3">
<img src="http://api.randomuser.me/portraits/men/97.jpg" alt="Seth Frazier" class="img-responsive img-circle" />
</div>
<div class="col-xs-12 col-sm-9">
<span class="name">Seth Frazier</span><br/>
<span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="7396 E North St"></span>
<span class="visible-xs"> <span class="text-muted">7396 E North St</span><br/></span>
<span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(560) 180-4143"></span>
<span class="visible-xs"> <span class="text-muted">(560) 180-4143</span><br/></span>
<span class="glyphicon glyphicon-envelope c-info" data-toggle="tooltip" title="seth.frazier@example.com"></span>
<span class="visible-xs"> <span class="text-muted">seth.frazier@example.com</span><br/></span>
</div>
<div class="clearfix"></div>
</li>
<li class="list-group-item">
<div class="col-xs-12 col-sm-3">
<img src="http://api.randomuser.me/portraits/women/90.jpg" alt="Jean Myers" class="img-responsive img-circle" />
</div>
<div class="col-xs-12 col-sm-9">
<span class="name">Jean Myers</span><br/>
<span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="4949 W Dallas St"></span>
<span class="visible-xs"> <span class="text-muted">4949 W Dallas St</span><br/></span>
<span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(477) 792-2822"></span>
<span class="visible-xs"> <span class="text-muted">(477) 792-2822</span><br/></span>
<span class="glyphicon glyphicon-envelope c-info" data-toggle="tooltip" title="jean.myers@example.com"></span>
<span class="visible-xs"> <span class="text-muted">jean.myers@example.com</span><br/></span>
</div>
<div class="clearfix"></div>
</li>
<li class="list-group-item">
<div class="col-xs-12 col-sm-3">
<img src="http://api.randomuser.me/portraits/men/24.jpg" alt="Todd Shelton" class="img-responsive img-circle" />
</div>
<div class="col-xs-12 col-sm-9">
<span class="name">Todd Shelton</span><br/>
<span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5133 Pecan Acres Ln"></span>
<span class="visible-xs"> <span class="text-muted">5133 Pecan Acres Ln</span><br/></span>
<span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(522) 991-3367"></span>
<span class="visible-xs"> <span class="text-muted">(522) 991-3367</span><br/></span>
<span class="glyphicon glyphicon-envelope c-info" data-toggle="tooltip" title="todd.shelton@example.com"></span>
<span class="visible-xs"> <span class="text-muted">todd.shelton@example.com</span><br/></span>
</div>
<div class="clearfix"></div>
</li>
<li class="list-group-item">
<div class="col-xs-12 col-sm-3">
<img src="http://api.randomuser.me/portraits/women/34.jpg" alt="Rosemary Porter" class="img-responsive img-circle" />
</div>
<div class="col-xs-12 col-sm-9">
<span class="name">Rosemary Porter</span><br/>
<span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5267 Cackson St"></span>
<span class="visible-xs"> <span class="text-muted">5267 Cackson St</span><br/></span>
<span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(497) 160-9776"></span>
<span class="visible-xs"> <span class="text-muted">(497) 160-9776</span><br/></span>
<span class="glyphicon glyphicon-envelope c-info" data-toggle="tooltip" title="rosemary.porter@example.com"></span>
<span class="visible-xs"> <span class="text-muted">rosemary.porter@example.com</span><br/></span>
</div>
<div class="clearfix"></div>
</li>
<li class="list-group-item">
<div class="col-xs-12 col-sm-3">
<img src="http://api.randomuser.me/portraits/women/56.jpg" alt="Debbie Schmidt" class="img-responsive img-circle" />
</div>
<div class="col-xs-12 col-sm-9">
<span class="name">Debbie Schmidt</span><br/>
<span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="3903 W Alexander Rd"></span>
<span class="visible-xs"> <span class="text-muted">3903 W Alexander Rd</span><br/></span>
<span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(867) 322-1852"></span>
<span class="visible-xs"> <span class="text-muted">(867) 322-1852</span><br/></span>
<span class="glyphicon glyphicon-envelope c-info" data-toggle="tooltip" title="debbie.schmidt@example.com"></span>
<span class="visible-xs"> <span class="text-muted">debbie.schmidt@example.com</span><br/></span>
</div>
<div class="clearfix"></div>
</li>
<li class="list-group-item">
<div class="col-xs-12 col-sm-3">
<img src="http://api.randomuser.me/portraits/women/76.jpg" alt="Glenda Patterson" class="img-responsive img-circle" />
</div>
<div class="col-xs-12 col-sm-9">
<span class="name">Glenda Patterson</span><br/>
<span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5020 Poplar Dr"></span>
<span class="visible-xs"> <span class="text-muted">5020 Poplar Dr</span><br/></span>
<span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(538) 718-7548"></span>
<span class="visible-xs"> <span class="text-muted">(538) 718-7548</span><br/></span>
<span class="glyphicon glyphicon-envelope c-info" data-toggle="tooltip" title="glenda.patterson@example.com"></span>
<span class="visible-xs"> <span class="text-muted">glenda.patterson@example.com</span><br/></span>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Search body -->
<div id="search" class="panel-collapse collapse">
<div class="panel-body">
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default "><span class="glyphicon glyphicon-chevron-right"></span></button>
</form>
</div>
</div>
</div>
</div>
<!-- Main Menu -->
<div class="side-menu-container">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Wall</a></li>
<li><a href="#"><span class="glyphicon glyphicon-comment"></span> Messages</a></li>
<li><a href="#"><span class="glyphicon glyphicon-fire" style="color:red;"></span> Trending <span class="badge text-right" style="float:right;background:red;">32</span></a></li>
<!-- Dropdown-->
<li class="panel panel-default" id="dropdown">
<a data-toggle="collapse" href="#dropdown-lvl1">
<span class="glyphicon glyphicon-exclamation-sign"></span> Notifications <span class="caret"></span>
</a>
<!-- Dropdown level 1 -->
<div id="dropdown-lvl1" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<!-- Dropdown level 2 -->
<li class="panel panel-default" id="dropdown">
<a data-toggle="collapse" href="#dropdown-lvl2">
<span class="glyphicon glyphicon-off"></span> Sub Level <span class="caret"></span>
</a>
<div id="dropdown-lvl2" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> About/Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<!-- Main Content -->
<div class="container" id="main-layout-body">
<div class="side-body">
<div class="container" style="margin-top: 20px; margin-bottom: 20px;">
<div class="row panel">
<div class="col-md-4 bg_blur "></div>
<div class="col-md-8 col-xs-12">
<img src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="img-thumbnail picture hidden-xs" />
<img src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="img-thumbnail visible-xs picture_mob" />
<div class="header">
<h1>Jamie Downsworth</h1>
<h4>Web Developer at <i>IT@Spectrum</i></h4>
<span>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</span>
</div>
</div>
</div>
<div class="row nav">
<div class="col-md-4"></div>
<div class="col-md-8 col-xs-12" style="margin: 0px;padding: 0px;">
<div class="col-md-4 col-xs-4 well"><i class="glyphicon glyphicon-user"></i> 16</div>
<div class="col-md-4 col-xs-4 well"><i class="glyphicon glyphicon-comment"></i> 14</div>
<div class="col-md-4 col-xs-4 well"><i class="glyphicon glyphicon-heart"></i> 26</div>
</div>
</div>
</div>
<h1> Main Content Here </h1>
<pre> Resize the screen to view the left slide menu </pre>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>
:focus {
outline: none;
}
body {
font-family: "Segoe UI", "Open Sans", sans-serif !important;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, h7, h8 {
font-weight:200;
}
.row {
margin-right: 0;
margin-left: 0;
}
/*
Sometimes the sub menus get too large for the page and prevent the menu from scrolling, limiting functionality
A quick fix is to change .side-menu to
-> position:absolute
and uncomment the code below.
You also need to uncomment
-> <div class="absolute-wrapper"> </div> in the html file
you also need to tweek the animation. Just uncomment the code in that section
--------------------------------------------------------------------------------------------------------------------
If you want to make it really neat i suggest you look into an alternative like http://areaaperta.com/nicescroll/
This will allow the menu to say fixed on body scoll and scoll on the side bar if it get to large
*/
/*.absolute-wrapper{
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
}*/
.side-menu {
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
}
.side-menu .navbar {
border: none;
}
.side-menu .navbar-header {
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav .active a {
background-color: transparent;
margin-right: -1px;
border-right: 5px solid #e7e7e7;
}
.side-menu .navbar-nav li {
display: block;
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav li a {
padding: 15px;
}
.side-menu .navbar-nav li a .glyphicon {
padding-right: 10px;
}
.side-menu #dropdown {
border: 0;
margin-bottom: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.side-menu #dropdown .caret {
float: right;
margin: 9px 5px 0;
}
.side-menu #dropdown .indicator {
float: right;
}
.side-menu #dropdown > a {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body {
padding: 0;
background-color: #f3f3f3;
}
.side-menu #dropdown .panel-body .navbar-nav {
width: 100%;
}
.side-menu #dropdown .panel-body .navbar-nav li {
padding-left: 15px;
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body .navbar-nav li:last-child {
border-bottom: none;
}
.side-menu #dropdown .panel-body .panel > a {
margin-left: -20px;
padding-left: 35px;
}
.side-menu #dropdown .panel-body .panel-body {
margin-left: -15px;
}
.side-menu #dropdown .panel-body .panel-body li {
padding-left: 30px;
}
.side-menu #dropdown .panel-body .panel-body li:last-child {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #search-trigger {
background-color: #f3f3f3;
border: 0;
border-radius: 0;
position: absolute;
top: 0;
right: 0;
padding: 15px 18px;
}
.side-menu #contacts-trigger {
background-color: #f3f3f3;
border: 0;
border-radius: 0;
position: absolute;
top: 0;
right: 50px;
padding: 15px 18px;
}
.side-menu .brand-name-wrapper {
min-height: 50px;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: block;
}
.side-menu #search {
position: relative;
z-index: 1000;
}
.side-menu #search .panel-body {
padding: 0;
}
.side-menu #search .panel-body .navbar-form {
padding: 0;
padding-right: 50px;
width: 100%;
margin: 0;
position: relative;
border-top: 1px solid #e7e7e7;
}
.side-menu #search .panel-body .navbar-form .form-group {
width: 100%;
position: relative;
}
.side-menu #search .panel-body .navbar-form input {
border: 0;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 50px;
}
.side-menu #search .panel-body .navbar-form .btn {
position: absolute;
right: 0;
top: 0;
border: 0;
border-radius: 0;
background-color: #f3f3f3;
padding: 15px 18px;
}
.side-menu #contacts {
position: relative;
z-index: 1000;
}
.side-menu #contacts .panel-body {
padding: 0;
}
.side-menu #contacts .panel-body .navbar-form {
padding: 0;
width: 100%;
margin: 0;
position: relative;
border-top: 1px solid #e7e7e7;
}
.side-menu #contacts .panel-body .navbar-form .form-group {
width: 100%;
position: relative;
}
.side-menu #contacts .panel-body .navbar-form input {
border: 0;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 50px;
}
.side-menu #contacts .panel-body .navbar-form .btn {
position: absolute;
right: 0;
top: 0;
border: 0;
border-radius: 0;
background-color: #f3f3f3;
padding: 15px 18px;
}
/* Main body section */
.side-body {
margin-left: 310px;
}
.panel {
.margin-bottom:0px;
border-radius:0px;
}
.hide-search>span {
top: -1px;}
.c-search > .form-control {
border-radius: 0px;
border-width: 0px;
border-bottom-width: 1px;
font-size: 1.3em;
padding: 12px 12px;
height: 44px;
outline: none !important;
}
.c-search > .form-control:focus {
outline:0px !important;
-webkit-appearance:none;
box-shadow: none;
}
.c-search > .input-group-btn .btn {
border-radius: 0px;
border-width: 0px;
border-left-width: 1px;
border-bottom-width: 1px;
height: 44px;
}
.c-list {
padding: 0px;
min-height: 44px;
}
.title {
display: inline-block;
font-size: 1.7em;
font-weight: bold;
padding: 5px 15px;
}
ul.c-controls {
list-style: none;
margin: 0px;
min-height: 44px;
}
ul.c-controls li {
margin-top: 8px;
float: left;
}
ul.c-controls li a {
font-size: 1.7em;
padding: 11px 10px 6px;
}
ul.c-controls li a i {
min-width: 24px;
text-align: center;
}
ul.c-controls li a:hover {
background-color: rgba(51, 51, 51, 0.2);
}
.c-info {
padding: 5px 10px;
font-size: 1.25em;
}
.well, .well:hover {
margin-top:-20px;
background-color:#f3f3f3;
border:0;
text-align:center;
cursor:pointer;
font-size: 25px;
padding: 15px;
border-radius: 0px !important;
color:rgb(128, 128, 128);
}
.bg_blur
{
background-image:url('http://data2.whicdn.com/images/139218968/large.jpg');
height: 300px;
background-size: cover;
}
.header{
color : #808080;
margin-left:10%;
margin-top:70px;
}
.picture{
height:150px;
width:150px;
position:absolute;
top: 75px;
left:-75px;
}
.picture_mob{
position: absolute;
width: 35%;
left: 35%;
bottom: 70%;
}
.btn-style{
width: 33.3%;
}
@media (max-width: 767px) {
.header{
text-align : center;
}
.nav{
margin-top : 30px;
}
}
/* small screen */
/*@media (max-width: 768px) {*/
.side-menu {
position: relative;
width: 100%;
height: 0;
border-right: 0;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: inline-block;
}
/* Slide in animation */
@-moz-keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@-webkit-keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@-moz-keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
@-webkit-keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
@keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
/* Slide side menu*/
/* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
.side-menu-container > .navbar-nav.slide-in {
-moz-animation: slidein 300ms forwards;
-o-animation: slidein 300ms forwards;
-webkit-animation: slidein 300ms forwards;
animation: slidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.side-menu-container > .navbar-nav {
/* Add position:absolute for scrollable menu -> see top comment */
position: fixed;
left: -300px;
width: 300px;
top: 43px;
height: 100%;
border-right: 1px solid #e7e7e7;
background-color: #f8f8f8;
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Uncomment for scrollable menu -> see top comment */
/*.absolute-wrapper{
width:285px;
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}*/
@-moz-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@-webkit-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@-moz-keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
@-webkit-keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
@keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
/* Slide side body*/
.side-body {
margin-left: 5px;
margin-top: 70px;
position: relative;
-moz-animation: bodyslideout 300ms forwards;
-o-animation: bodyslideout 300ms forwards;
-webkit-animation: bodyslideout 300ms forwards;
animation: bodyslideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.body-slide-in {
-moz-animation: bodyslidein 300ms forwards;
-o-animation: bodyslidein 300ms forwards;
-webkit-animation: bodyslidein 300ms forwards;
animation: bodyslidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Hamburger */
.navbar-toggle {
border: 0;
float: left;
padding: 18px;
margin: 0;
border-radius: 0;
background-color: #f3f3f3;
}
/* Search */
#search .panel-body .navbar-form {
border-bottom: 0;
}
#search .panel-body .navbar-form .form-group {
margin: 0;
}
#contacts .panel-body .navbar-form {
border-bottom: 0;
}
#contacts .panel-body .navbar-form .form-group {
margin: 0;
}
.navbar-header {
/* this is probably redundant */
position: fixed;
z-index: 3;
background-color: #f8f8f8;
}
/* Dropdown tweek */
#dropdown .panel-body .navbar-nav {
margin: 0;
}
@media (min-width: 768px)
{
.navbar-header
{
float: none;
}
.navbar-toggle
{
display: block;
}
.navbar-collapse.collapse
{
display: none !important;
}
}
#main-layout-body{
padding-top:50px;
}
.div.row.panel {
background-color: #f8f8f8;
box-shadow: 0px 0px 5px rgba(204, 204, 204, 0.7);
}
.bg_blur{
box-shadow: 0px 0px 5px rgba(204, 204, 204, 0.7);}
.side-body > .container {margin-right: 0px;padding:0;}
ul.nav.navbar-nav.slide-in > :first-child > a {
padding-top:25px;
}
.img-responsive {
max-width: 20%;
}
.list-group-item > .col-xs-12.col-sm-9 {
text-align:right;
float:right;
}
span.name{
font-size:24px;
font-weight:200;}
div.panel.panel-default {
margin-bottom:0;
}
/*}*/
$(function () {
$('.navbar-toggle').click(function () {
$('.navbar-nav').toggleClass('slide-in');
$('.side-body').toggleClass('body-slide-in');
$('#search').removeClass('in').addClass('collapse').slideUp(200);
/// uncomment code for absolute positioning tweek see top comment in css
//$('.absolute-wrapper').toggleClass('slide-in');
});
// Remove menu for searching
$('#search-trigger').click(function () {
$('.navbar-nav').removeClass('slide-in');
$('.side-body').removeClass('body-slide-in');
/// uncomment code for absolute positioning tweek see top comment in css
//$('.absolute-wrapper').removeClass('slide-in');
});
$('[data-toggle="tooltip"]').tooltip();
$('[data-command="toggle-search"]').on('click', function(event) {
event.preventDefault();
$(this).toggleClass('hide-search');
if ($(this).hasClass('hide-search')) {
$('.c-search').closest('.row').slideUp(100);
}else{
$('.c-search').closest('.row').slideDown(100);
}
})
$('#contact-list').searchable({
searchField: '#contact-list-search',
selector: 'li',
childSelector: '.col-xs-12',
show: function( elem ) {
elem.slideDown(100);
},
hide: function( elem ) {
elem.slideUp( 100 );
}
})
});
