"Simple Side navbar with hover effect - Sidebar #Inspiration from dribbble"
Bootstrap 3.3.0 Snippet by Arshi_S

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-sm-4 sidebar1"> <div class="logo"> <img src="http://lorempixel.com/output/people-q-g-64-64-1.jpg" class="img-responsive center-block" alt="Logo"> </div> <br> <div class="left-navigation"> <ul class="list"> <h5><strong>WHEREABOUTS</strong></h5> <li>Home</li> <li>Office</li> <li>School</li> <li>Gym</li> <li>Art Class</li> <li>Hike Club</li> </ul> <br> <ul class="list"> <h5><strong>HOBBIES</strong></h5> <li>Hiking</li> <li>Rafting</li> <li>Badminton</li> <li>Tennis</li> <li>Sketching</li> <li>Horse Riding</li> </ul> </div> </div> <div class="col-md-10 col-sm-8 main-content"> <!--Main content code to be written here --> <h1>FEEDBACK APPRECIATED! :)</h1> <h3>P.S.: For side navbar with dropdown menu, you may refer this snippet: http://bootsnipp.com/user/snippets/kWPoW</h3> </div> </div> </body>
.sidebar1 { background: #F17153; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#F17153, #F58D63, #f1ab53); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#F17153, #F58D63, #f1ab53); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#F17153, #F58D63, #f1ab53); /* For Firefox 3.6 to 15 */ background: linear-gradient(#F17153, #F58D63, #f1ab53); /* Standard syntax */ padding: 0px; min-height: 100%; } .logo { max-height: 130px; } .logo>img { margin-top: 30px; padding: 3px; border: 3px solid white; border-radius: 100%; } .list { color: #fff; list-style: none; padding-left: 0px; } .list::first-line { color: rgba(255, 255, 255, 0.5); } .list> li, h5 { padding: 5px 0px 5px 40px; } .list>li:hover { background-color: rgba(255, 255, 255, 0.2); border-left: 5px solid white; color: white; font-weight: bolder; padding-left: 35px; }.main-content{ text-align:center; }

Questions / Comments:

for 

.sidebar1
css you can use 
height: 100vh;
instead of 
100%
.

Also, for bootstrap 4 img-responsive and center-block are not working.

Otherwise: great starter!

woutervddn () - 7 years ago - Reply 0

Good Snippet, but how i can change the menus to be a dropdown menu?

Kevin Gomz () - 9 years ago - Reply 0

Thank you Kevin. Apologies for late reply.
Here, I have posted a snippet with a dropdown menu. It also has a short tutorial in comment section on how to achieve the dropdown.

http://bootsnipp.com/snippe...

Arshi () - 9 years ago - Reply 0