Twitch-like Navbar
<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);
}
how to create a vertical navbar which has social meadia links,i mean icons,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/GMOS9Muafter – http://imgur.com/Vz49944,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; },JSAdd this to both functions in javascript$(‘body’).toggleClass(‘on’);,Tasty theme!,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.,how to add images insted of these charactors,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.,oh I also don’t know about that ,thanks for the quick reply ,I mean instead of before icons,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 !,Sorry but I am having a hard time trying to figure out what you are asking.,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,in the class `.navbar-twitch` you’ll want to change `left` to `right`,thanks @mouse0270:disqus !!,@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.,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.,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.,sadasd,Really nice work !But in some case text is behind your navbar, could you fix it ?,Could you provide me with the browser you are using. I use chrome and it seems to work with out any issues.,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 ;),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.,Here is 2 examples of what I see :http://i.imgur.com/E8jRmUs.pnghttp://i.imgur.com/DOgNeVq.png,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.,Obviously I wasn’t clear enough ;)Works perfectly now !Thanks for your time !,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.,exactly what i have been looking for…….tanx man u r the bomb,The author is mouse0270
Loading...
