"Twitch-like Navbar"
Bootstrap 3.1.0 Snippet by mouse0270

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="navbar navbar-inverse navbar-twitch" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <span class="small-nav"> <span class="logo"> <B> </span> </span> <span class="full-nav"> < Bootsnipp > </span> </a> </div> <div class=""> <ul class="nav navbar-nav"> <li class="active"> <a href="#"> <span class="small-nav" data-toggle="tooltip" data-placement="right" title="Home"> <span class="glyphicon glyphicon-home"></span> </span> <span class="full-nav"> Home </span> </a> </li> <li> <a href="#about-us"> <span class="small-nav" data-toggle="tooltip" data-placement="right" title="About Us"> <span class="fa fa-users"></span> </span> <span class="full-nav"> About Us </span> </a> </li> <li> <a href="#contact-us"> <span class="small-nav" data-toggle="tooltip" data-placement="right" title="Contact Us"> <span class="glyphicon glyphicon-comment"></span> </span> <span class="full-nav"> Contact Us </span> </a> </li> </ul> </div><!--/.nav-collapse --> </div> </div> <button type="button" class="btn btn-default btn-xs navbar-twitch-toggle"> <span class="glyphicon glyphicon-chevron-right nav-open"></span> <span class="glyphicon glyphicon-chevron-left nav-close"></span> </button> <div class="container"> <div class="row"> <h2>Bootstrap Navigation meets Twitch Navigation</h2> <p>This is just a quick and dirty example I made to show off to a friend. Don't forget to change the theme using the dropdown above.</p> </div> <div class="row"> <h2>Navbar Styles</h2> <p>Just to show off how easy it is to theme!</p> <button type="button" class="btn btn-inverse nav-style-toggle disabled" data-type="inverse"> Inverse</button> <button type="button" class="btn btn-default nav-style-toggle" data-type="default"> Default</button> <button type="button" class="btn btn-purple nav-style-toggle" data-type="purple"> Purple</button> </div> </div>
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); body { padding-top: 15px; padding-left: 65px; } .navbar-twitch { position: fixed; top: 0px; left: 0px; width: 50px; height: 100%; border-radius: 0px; border: 0px; z-index: 1030; } .navbar-twitch.open { width: 240px; } .navbar-twitch > .container { padding: 0px; width: 100%; } .navbar-twitch .navbar-header, .navbar-twitch .navbar-brand { float: none; display: block; width: 100%; margin: 0px; } .navbar-twitch .navbar-brand { height: 50px; } .navbar-twitch > .container .navbar-brand { padding: 0px; margin: 0px; } .navbar-twitch > .container .navbar-brand > .small-nav { display: block; } .navbar-twitch > .container .navbar-brand > .small-nav > span.logo, .navbar-twitch.open > .container .navbar-brand > .full-nav { display: block; font-weight: bold; padding: 15px 2px 15px 3px; font-size: 18pt; } .navbar-twitch.open > .container .navbar-brand { width: 100%; padding: 15px 15px 60px; text-align: center; } .navbar-twitch.navbar-inverse > .container .navbar-brand > .small-nav > span.logo { /*color: rgb(255, 255, 255);*/ } .navbar-twitch .navbar-nav > li { float: none; } .navbar-twitch > .container .full-nav { display: none; } .navbar-twitch.open > .container .full-nav { display: block; } .navbar-twitch.open > .container .small-nav { display: none; } .navbar-twitch .navbar-collapse { padding: 0px; } .navbar-twitch .navbar-nav { float: none; margin: 0px; } .navbar-twitch .navbar-nav > li > a { padding: 0px; } .navbar-twitch .navbar-nav > li > a > span { display: block; font-size: 16pt; padding: 13px 15px 13px 12px; } .navbar-twitch .tooltip, .navbar-twitch .tooltip .tooltip-inner { max-width: auto; white-space:nowrap; } .navbar-twitch-toggle { position: fixed; top: 5px; left: 55px; } .navbar-twitch ~ .navbar-twitch-toggle > .nav-open { display: inline-block; } .navbar-twitch ~ .navbar-twitch-toggle > .nav-close { display: none; } .navbar-twitch.open ~ .navbar-twitch-toggle { left: 245px; } .navbar-twitch.open ~ .navbar-twitch-toggle > .nav-open { display: none; } .navbar-twitch.open ~ .navbar-twitch-toggle > .nav-close { display: inline-block; } .btn-purple, .btn-purple:hover, .btn-purple:focus, .btn-purple:Active { color: rgb(255, 255, 255); background-color: rgb(86, 61, 124); border-color: rgb(111, 84, 153); } .btn-purple:hover, .btn-purple:focus, .btn-purple:Active { background-color: rgb(111, 84, 153); border-color: rgb(86, 61, 124); } .navbar { background-image: none !important; } .navbar-purple { background-color: rgb(86, 61, 124); border-color: rgb(111, 84, 153); } .navbar-purple .navbar-brand, .navbar-purple .navbar-nav > li > a, .navbar-purple .navbar-brand:hover, .navbar-purple .navbar-nav > li > a:hover, .navbar-purple .navbar-brand:focus, .navbar-purple .navbar-nav > li > a:focus { color: rgb(205, 191, 227);; } .navbar-purple .navbar-brand:hover, .navbar-purple .navbar-nav > li > a:hover, .navbar-purple .navbar-brand:focus, .navbar-purple .navbar-nav > li > a:focus, .navbar-purple .navbar-nav > .active > a, .navbar-purple .navbar-nav > .active > a:hover, .navbar-purple .navbar-nav > .active > a:focus { background-color: rgb(111, 84, 153); color: rgb(255, 255, 255); }
$(document).ready(function() { $('.navbar-nav [data-toggle="tooltip"]').tooltip(); $('.navbar-twitch-toggle').on('click', function(event) { event.preventDefault(); $('.navbar-twitch').toggleClass('open'); }); $('.nav-style-toggle').on('click', function(event) { event.preventDefault(); var $current = $('.nav-style-toggle.disabled'); $(this).addClass('disabled'); $current.removeClass('disabled'); $('.navbar-twitch').removeClass('navbar-'+$current.data('type')); $('.navbar-twitch').addClass('navbar-'+$(this).data('type')); }); });

Related: See More


Questions / Comments:

how to create a vertical navbar which has social meadia links

Divesh kumar () - 2 years ago - Reply 0


i mean icons

speedy () - 2 years ago - Reply 0


Hello. I think someone else had this question also but I didn't see an answer.

I'm a newbie to modern web dev, til now, an old-school, legacy programmer. I have got your code working on my server but, when the left nav is expanded, the small-nav is hidden behind the expanded navbar. I would like to move the small-nav over just to the right of the expanded navbar when it is opened so it can be re-collapsed.

Here's a link to a picture showing the small button is missing (behind the navigator)
http://imgur.com/oVXMs9I

A year from now, I will look back at this and laugh at my ignorance, but right now, it is a pain.
Please help me.
Thank you.
Carleen

EDIT: later, I noticed the same thing happening in the preview window on Bootsnipp:
before - http://imgur.com/GMOS9Mu
after - http://imgur.com/Vz49944

carleen () - 3 years ago - Reply 0


THANKS! This is great. My first time posting so I hope I am allowed to post code. I made a minor modification to help those who want the nav to resize with the page.

CSS.
Add this after body
body.on {
padding-left: 265px;
}

JS
Add this to both functions in javascript
$('body').toggleClass('on');

Billy Chen () - 4 years ago - Reply 0


Tasty theme!

Bang () - 4 years ago - Reply 0


hello mouse0270

how can i do it on my page? i try to copy your code and add the other file from bootstrap 3.1 and when the page load the nav-open and nav-close are displaying at the same time and when i click it the sidebar will show and the nav-open and nav-closed will disappear.

carla () - 4 years ago - Reply 0


how to add images insted of these charactors

lakindu () - 4 years ago - Reply 0


Quick question, how do we have the same username?

You should just have to replace the span with an img tag. The only thing is to make sure you image is the same size as the font.

mouse0270 () - 4 years ago - Reply 0


oh I also don't know about that ,thanks for the quick reply ,I mean instead of before icons

lakindu () - 4 years ago - Reply 0


hi ! 1 question for delete a color choice and have only a default color what i change ( all time i had try the result is a mess ) ?
thanks @mouse0270:disqus for this work !

a far friends () - 4 years ago - Reply 0


Sorry but I am having a hard time trying to figure out what you are asking.

mouse0270 () - 4 years ago - Reply 0


hello all !! .. i'm a beginner , i see this wonderful work , i want ask i want move the bar from left side to right side , what i must change ? thanks

ste75 () - 4 years ago - Reply 0


in the class `.navbar-twitch` you'll want to change `left` to `right`

mouse0270 () - 4 years ago - Reply 0


thanks @mouse0270:disqus !!

ste75 () - 4 years ago - Reply 0


@mouse0270:disqus hi! How can i do it on my page? Im a newbie in using bootstrap.. pls. help me. what i have for now is the basic code to implement bootstrap on my page. I really want to create somthing like this. can you please help me? thanks.

aster () - 5 years ago - Reply 0


Sorry for the delay. One of the things I hate about disqus is I don't always get notified when someone comments. I would need to see your page to be able to help with implementation.

mouse0270 () - 4 years ago - Reply 0


hi! How can i do it on my page? Im a newbie in using bootstrap.. pls. help me. what i have for now is the basic code to implement bootstrap on my page. I really want to create somthing like this. can you please help me? thanks.

-aster- () - 5 years ago - Reply 0


sadasd

sadsd () - 5 years ago - Reply 0


Really nice work !
But in some case text is behind your navbar, could you fix it ?

Julien () - 5 years ago - Reply 0


Could you provide me with the browser you are using. I use chrome and it seems to work with out any issues.

mouse0270 () - 5 years ago - Reply 0


Just noticed it on a Mac Book Pro 13" using Chrome (Version 34.0.1847.116) with minimal width allowed by browser (manually resized)
Don't hesitate if you need any new informations ;)

Julien () - 5 years ago - Reply 0


could you provide me with a screen shot. I am using the same version on windows 7 with no issue... the button come a little close to the scrollbar, but other than that it seems to be fine.

mouse0270 () - 5 years ago - Reply 0


Julien () - 5 years ago - Reply 0


WOW do I feel stupid. You were talking about the content text not the navbar text. haha. Check it out now. To fix the issue you just have to add a left padding of 65 to the body of the document.

mouse0270 () - 5 years ago - Reply 0


Obviously I wasn't clear enough ;)
Works perfectly now !
Thanks for your time !

Julien () - 5 years ago - Reply 0


No thank you, I hadn't even thought about the content. haha. I was way to focus on the navigation. I am glad you pointed it out and helped me resolve the issue.

mouse0270 () - 5 years ago - Reply 0


exactly what i have been looking for.......tanx man u r the bomb

Oyeleye mustapha () - 5 years ago - Reply 0