Twitter Bootstrap 101: The Navbar
videos

Twitter Bootstrap 101: The Navbar

on Mar 22nd 2012 with 33 comments
Tutorial Details
  • Topic: Twitter Bootstrap
  • Difficulty: Beginner
  • Screencast duration: 16 mins
Download Source Files
Demo View It Online
This entry is part 4 of 8 in the series Twitter Bootstrap 101

Twitter Bootstrap 101

One of the great features of Twitter Bootstrap 2.0 is its excellent responsive navbar. In this brief tutorial, we’ll tackle a number of things including the navbar documentation, updating our sample files and looking at the necessary JavaScript.

In these screencasts we’ll cover the following:

  • We’ll check out some recent updates to Twitter Bootstrap’s online documentation — I recommend following the Changelog, which is updated frequently!
  • We’ll unpack the sample files and go to work on the navbar markup, adding a dropdown nav and search field.
  • We’ll setup the JavaScript that’s needed for the dropdown and the collapsing responsive navbar.
  • Finally, in the sample files I’ve included some notes and examples you may find helpful for customizing the navbar to fit alternative layouts, including a full-width static navbar (not fixed to the top), and a navbar that’s constrained to the width of your site contents.

Navbar Documentation

Following the documentation is turning out to be pretty important, as it is updated frequently. In this case, recent updates have impacted some of the examples I’ve provided in our sample files.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Navbar Markup

Let’s unpack the sample files and go to work on the navbar markup, adding a dropdown nav, floating it right, and adding a search field.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes, YouTube or blip.tv!

Navbar JavaScript

The dropdowns and collapsible responsive menu don’t work without the JavaScript, so let’s set that up!

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Links and Downloads

Have fun!

Series Navigation<< Twitter Bootstrap 101: Introducing 2.0Twitter Bootstrap 101: Tabs and Pills >>

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

David Cochran is Associate Professor of Communication at Oklahoma Wesleyan University. He and his students have designed and manage a number of websites, including DeclaringAmerica.com, OKWUeagle.com, and aLittleCode.com.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • supprof

    this tutorial is turning into a complete huge serie about bootstrap and that’s great!!!!
    thank you very mutch

  • Pingback: Website - Templates - Tools - Bootsrap | Pearltrees

  • ben

    Thank you this is brilliant!

    Are you going to roll this into Boilerplate’s markup as well? – notice we’re using a lot of divs, and Im thinking that we could use html5 markup for some of it. I totally wouldn’t want you to describe both twitter bootstrap and boilerplate at the same time — just wondering if you were going to convert this at some point.

    cheers for this!

    • http://www.darkdreams.biz Jamie

      There’s a tool out there for rolling HTML5 BP and Bootstrap together… for the life of me I can’t remember what the url for the site is :(

      Workless does exactly what you want (http://ikreativ.com/projects/workless/#) but there was a site out there with a lovely gui interface where you could pick the bits you want…

      No, no wait I found it… http://www.initializr.com/

      • http://www.snaptin.com Ian Yates

        Great resource – thanks Jamie :)

    • http://www.darkdreams.biz Jamie

      HTML5 Boilerplate combined with Bootstrap, throw a little Less into the mix or Sass if you prefer and you’ve hit effortless coding nirvana. The damn stuff writes itself, codejitsu at its finest.

      It is a good time to be a web monkey code ninja!

  • Pingback: Twitter Bootstrap 101: The Navbar | Shadowtek | Hosting and Design Solutions

  • Fran

    This is just amazing .. the way you explain things is so clear .. I hope you continue with these series… thanks very much .. :)

  • http://alittlecode.com David Cochran
    Author

    Hi all. Glad this is hitting the spot. Thanks for the feedback. The idea of a tutorial to finish this off in an HTML5 Boilerplate way is a good one. It’s been encouraging to see the Bootstrap and Boilerplate teams both moving in that direction, and it’s only going to become more effortless. On that note — I had not yet found initializr.com. Many thanks Jamie!

  • http://codebase.com.au Rawdyn

    Great tutorial David.

    While I have found Bootstrap utterly exceptional I have also found that some details of the documentation either a little hidden or missing to keep things simple (I should add I don’t consider that a fault of Bootstrap but a failing in my own HTML5 and CSS expertise).

    Your tutorial very quickly explains things in a manner that is easy to understand and allows us to get on with doing the work.

    Thanks and keep up the good work. I’ll be looking our for more tutorials from you.

    Rawdyn

  • Pingback: Skrypt przyklejonego nagłówka, przewijanego z resztą strony | lubik.info webmaster's blog

  • http://rodleg.wordpress.com/portfolio/ Rod-Leg

    nice tutorial, thanks ;-)

  • http://andrewcondon.com Andrew Condon

    Thanks a lot, really nicely done tutorial in all aspects (video, files, docs, order of presentation etc).

    The only small suggestion i have is that you could use zen-coding (http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/) for writing code such as the dropdown nav example – i think it would actually be clearer than seeing someone typing out the HTML.

    thanks again, A

  • Ricardo

    I’m tried resizing the index page from the demo files, and the hero unit gets messed up and the text gets out of the hero-unit. Is there any way to fix this?

    • http://alittlecode.com David Cochran
      Author

      Ricardo,
      I’ve noticed that as well — the hero unit styling doesn’t automatically adjust well for narrow viewports. So I’ve mixed this in to my custom CSS. See how it works for you, and adjust as needed!

      /* size down hero unit contents to fit a narrow viewport */
      @media (max-width: 480px) {
      .hero-unit {
      padding: 0;
      margin: 0;
      background: transparent;
      }
      .hero-unit h1 {
      font-size: 250%;
      }
      .hero-unit h2 {
      font-size: 180%;
      }
      }

      • Ricardo

        Thanks for the response David, I’m working on a project using bootstrap and your tutorials have really helped me, can’t wait for the next part.

  • http://aldofernandez.com @Aldoforce

    Thanks for this great tutorial!
    Hope to see more.

  • India

    This has been a great introduction to Twitter bootstrap. I’m actually excited to see whats coming up next. Thanks David for the effortless explanation. Keep up the good work guys.

  • http://twitter.com/farazq @farazq

    First off – awesome set of tutorials. Very helpful!

    Second, I ran into a small issue setting up the custom stylesheet for hero.html, using the site setup notes. Used the same import statements (bootstrap, then the responsive) and then the padding for the main.

    Issue is when I reduce the browser window, the 60px padding is added in. So there is padding between the top of the window and the beginning of the nav bar…but only when the browser window is reduced. If I don’t do the custom stylesheet, and leave hero.html as it is (bootstrap, padding, then responsive bootstrap), it works fine.

    Probably something silly I’m missing. Any ideas?

    • http://alittlecode.com David Cochran
      Author

      @farazq –
      To use the method you’ve employed (which is also what I do!), you’ll need to add a media query to remove the padding-top from the body element when the navbar-fixed-top makes the break to its narrow viewport layout (at 979px and below). (Why? Because it goes to relative positioning at this point.)

      So my custom.css begins with the following lines, and the key line your missing is the last @media block:

      @import url(‘bootstrap.css’);
      @import url(‘bootstrap-responsive.css’);

      body { /* Add padding-top for full-width layout with navbar-fixed-top */
      padding-top: 60px;
      }
      @media (max-width: 979px) {
      body { /* Remove padding-top when navbar collapses for narrow viewports */
      padding-top: 0;
      }
      }

  • http://paintndesign.com phil

    Still skeptical about frameworks, i mean its fantastic but its just a plug in method and may not teach begining web developers much in the way of code. what do you guys think about frameworks, i agree it saves time but i dont want to be dependent on them and not know how to design a site from scratch using the same techniques

    • http://twitter.com/vladimir_light V-Light

      The main idea of frameworks – save time! Those movies are about 12 min each (average) so its gonna take about 35-40 min (for those three) to watchen them and start to work. Creare a new grid-based, responsive web-layout from scratch would take much greater amout of time!!!!! So if you have deadlines – frameworks are the best (mostly) solution!

    • http://alittlecode.com David Cochran
      Author

      phil,
      There is the time-saving aspect, as V-Light points out, but in my opinion a really good framework also offers more. In this case, the combined package of HTML/CSS/JavaScript components in Twitter Bootstrap help bring more developers into following current best practices. AND it contributes toward the standardization of several design and behavioral components — a well laid out grid, responsive layout, well designed form elements, well-established JavaScript behaviors, etc. — that just make sense — largely because they make sense to users.

      As a specific example, consider the thought that’s been given to the drop-down functionality. A superfish-style drop-down that’s triggered on hover was a previous best practice, but in a world of touch devices, hover-triggered dropdowns are impractical. Thus, I appreciate the thought that Mark and Jacob put into the dropdown that’s triggered on click, with efficient and visually effective visual affordances built in. On that topic, see Mark Otto’s post: http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

      As with the HTML5 Boilerplate, what we have forming around Bootstrap is a community of energetic and thoughtful developers pooling their best solutions into one carefully built package — a package that we can pick up on, adjust to our needs, and go to town with.

  • Felipe Hardt

    Thank you!

    This series of tutorials are awesome

  • http://www.chrisarnold.co Chris Arnold

    Great set of tutorials! I’ve just started using Twitter Bootstrap and these tutorials have helped massively so thanks. Are you planning on doing anymore in this series?

    • http://alittlecode.com David Cochran
      Author

      Chris — Thanks and yep — the latest one (Tabs and Pills) went live today!

  • http://private-storm.de stOrM!

    Uhm can it be the Navbar had a bug?
    When you have comboboxes inside the navbar then try to resize the browser window so that the whole navbar turns itself into a combobox. Then expand the combobox items. Resize the browser window again to full size so that your navbar turns back from a combobox mode to a navbar, try then to expand the items in your combobox which is part of the navbar, they wont open. You need to refresh the webpage to make it work again.

  • http://www.kelleherwebdesign.com Dharma Kelleher

    These tutorials are great. My challenge is now figuring out how to integrate them into a WordPress theme, particularly the navigation aspects of it. Will you be covering this in a future tutorial!

  • http://gregdixson.com Greg

    Great intro to Bootstrap, Thank you! I’ve played around with Zurb’s Foundation and now Bootstrap is also Responsive looking to test it out and see what’s best. I’m also wondering about if I’ll couple it with WordPress… Hmm!

    Dharma: there’s a few WP / Bootstrap integrations around. This one seems to be the most complete, though I haven’t had a chance to try it myself yet: http://rachelbaker.me/bootstrapwp/

    p.s. I’m also with a big thumbs-up for Initializer :)

  • Pingback: Twitter Bootstrap 101: The Navbar | Webdesigntuts+ » Web Design

  • Rishi

    Hi David,

    Thank you kindly for these tutorials. I am a complete beginner learning to code for the first time. I went from going through the htmldog tutorials to downloading Bootstrap. Now I’m playing around in Bootstrap and trying to figure out what’s going on. I’m not sure if this is a good strategy, but I’m finding these tutorials helpful, fun and easy to follow.

    With respect to Initializr, Mickael Daniel, a contributor to H5BP, has also put together a script that automates the combination of H5BP and Bootstrap: https://gist.github.com/1422879.

    I have yet to play around with H5BP, but that’s definitely on my learning roadmap.

    Thanks again.

    Cheers,
    Rishi

  • Kenny

    How do you pass option variables to the navbar? For example, I don’t want the Drop-down menu to display a list when I press on the collapse until I press on the Drop-down menu.

  • Pingback: Twitter Bootstrap 101 from TutsPlus

  • Pingback: Canvas Tutorial: Add Bootstrap Navbar to WooThemes Canvas Theme

  • http://www.chrisanhnguyen.com Christopher

    I’m currently new to CSS and HTML. Great tutorial! Thanks for taking the time to do this!

    I was looking at the bootstrap.css file and was wondering what a class declaration followed by a space then another declaration means. For example

    .nav .nav-header{

    styles here;

    }

    • kamome

      It simply means a .nav-header class living inside a .nav class.

  • mrto2

    Hi,

    Its awesome tutorial! Here i have some issues with nav bar and I guess others might have the same.

    1) If we have lots of menus and sub-menus then all the menus appear at the same time in smaller screens. It becomes a long long list of menu items and you just need to drag down and down. So how to hide the sub menu items while on mobile screens and how to make them work like accordion there.

    2) Can we work with multi-columns in nav bar in bootstrap? If yes then how?

    (We can see both of the examples in the famous “The Boston Globe” website http://www.bostonglobe.com/)

  • Joel Ransom

    Excellent videos, thanks so much. One “opportunity for improvement” as they say, :) there’s a ton of low-end rumble in the audio when heard on actual speakers. Might want to do a bit of post-processing to improve audio quality. Minor quibble though!

  • Barry Nervous

    Hey Buddy, I couldn’t get the 3 links on the right to align correctly with the others and they didn’t appear to have the same CSS. I really watched the video and tried typing exactly what you typed and I still ended with a different result. so I couldn’t follow the Js correctly. But the videos are so awesome and they really are helping me out. Keep it up!