Website marketing using high authority backlinks from popular website's, find out more at webcentreplus.com or email colin@webcentreplus.com
Click Here!

Code a Responsive Website with Bootstrap 3 – [Lecture 7] Coding the Navigation Bar

Lecture #7: In this lecture, we code the HTML for the Bootstrap 3 dropdown menus in the navigation bar.

===========
Please Donate:
===========
To help me create more free courses, please donate any amount you wish: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CGCLFARTMMBMQ

=================
More about this course:
=================

==============
Code Responsively
==============

Do you want to learn how to build a responsive, mobile-friendly and beautiful website using HTML5, CSS3 and jQuery? Look no further! You’re in the right place.

======================
A Simple Step-by-Step Guide
======================

This course is a simple, step-by-step tutorial that will arm you with the appropriate skills and knowledge to start building your very own responsive websites using the newly released Twitter Bootstrap 3 — a popular, free, mobile-first, open-source framework.

==========
Dive Right In
==========

We will dive into hand-coding custom responsive layouts, sliding carousels, beautiful buttons, device-specific elements, scalable font icons, and so much more! This course includes all HTML5, CSS3, jQuery, and even Photoshop files for you to use for free in your own websites & applications.

What are you waiting for? Let’s get ahead of the game and get started right now!

=====================
Check out the Final Product
=====================

View the website you will be building in this course by visiting this link on your mobile device: http://bradhussey.ca/course/bootstrap/

=======================
What My Students Are Saying
=======================

Ground breaking (and simple) web creation.

Wow. What’s the most expensive website on the Internet? Facebook? Twitter? Because when you finish this course you will have hand-coded a webpage that looks and functions JUST like the most impressive and intuitive websites that once took programmers thousands of hours to code. Bootstrap 3 is RIDICULOUSLY straight-forward.

These videos are well created, concise, fast-paced, easy to follow, and just funny enough to keep you chuckling as you’re slamming out lines of code. I’ve taken 3 courses from this instructor. Whenever I have questions he is right there with a simple solution or a helpful suggestion to keep me going forward with the course work.

If you haven’t done any coding before (or need to get brushed up on HTML) this guy’s HTML course is a bit slower and more in depth as to how the entry level code works. This Bootstrap course assumes that you’re well-versed in HTML and runs with it. My only complaint is that I now have to go back and re-do ALL my websites… because this course info is just too good to pass up. 😉

– Brennan Cuff, http://www.theuniversitybarbershop.com/

source – For all your website needs, visit Spalding Web Design

38 Responses to Code a Responsive Website with Bootstrap 3 – [Lecture 7] Coding the Navigation Bar

  • Hey smb help please
    if I want to make a margin right for the account icon, what am I to write in code?
    P.S. the best courses on Bootstrap i`ve ever seen _

  • great job!

  • Thank you, brad for your work, you are very good teacher.
    I found I little bug in your code.
    Navbar when used in mobile view (i.e. clicking a link) does not collapse afterwards. This means that the menu remains expanded and therefore covers the content. Could you please explain how to fix it?

  • Hi, if i want to move the links below the search panel how to achieve it?

  • Ben Hall says:

    Awesome awesome video series, obvious subscribe for someone learning how to web design! One question if you get round to it, When i shrink the screen to mobile width the Search bar and the search button go on separate layers? Any idea why?

    Cheers again

  • Latest version of bootstrap doesn't contain navbar-responsive-collapse class in CSS. So use navbar-collapse instead.

  • I would recommend in the navbar toggle to put the following for screen readers (above the icon-bar)
    <span class="sr-only">Toggle Navigation</span>

    Also, in the button, I always put the following as well:
    aria-expanded="false" aria-controls="navbar"

    So then the button would look like so:
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle Navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>

    If someone with adaptive equipment comes to your site, they won't know what the button does if you don't include the sr-only class within the first span.

  • Hi, nice class! How do I change the backgroundcolor of the dropdown from blue to something else when you hover over the menu?

  • Ibrag91 says:

    And your code doesn't work !!!

  • Have you tried to summon nav menu and those dropdowns while your brouser window is extra small (under 768px)? Looks quite crude as for me. Nav menu should be more compact, and dropdown of My Account should be left-sided, not right (because of float right, I believe).
    Please tell me how can I fix abovementioned issues. Thanks.

  • noelsoong777 says:

    my search form has taken the whole width of the collapsed menu for some reason

  • ismet glu says:

    Hi, thanks for tutorijals, how make dropdown whit hover mouse?

  • sivanarayana says:

    Really good sir

  • Evaldas Kal says:

    If for someone navbar isn't collapsing on small devices try to change where it says: <div class nav-collapse …..> to <div class navbar-collapse…..> That worked for me.

  • m look says:

    Very good tutorial. I notice that if you have multiple elements in the navbar and the navbar is of medium size then the right div goes down 
    http://postimg.org/image/3r13u4vph/
    Do you know where is the problem?

  • Jeff Tomasek says:

    Hello Brad,

    When I change the size of my browser, the navbar collapses like it should, and displays the button, however the button does not toggle the menu, the menu just stays visible vertically. Here is my code:

    <div class="container" id="main">

    <div class="navbar navbar-fixed-top">

    <div class="container">

    <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>

    <a class="navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
    <div class="nav-collapse collapse navbar-responsive=collapse">

    </div><!-end nav-collapse –>

    <ul class="nav navbar-nav">

    <li class="active">

    <a href="#">Home</a>

    </li>
    <li class="dropdown">

    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services<strong class="caret"></strong></a>

    <ul class="dropdown-menu">

    <li>
    <a href="#">Webdesign</a>
    </li>
    <li>
    <a href="#">Web Development</a>
    <li>
    <a href="#">SEO</a>
    </li>

    <li class="divider">

    </li>

    <li class="dropdown-header">More Services</li>

    <li>
    <a href="#"></a>
    </li>
    <li>
    <a href="#">Content Creation</a>
    <li>
    <a href="#">Social Media Marketing</a>

    </ul><!-end dropdown menu->
    </ul>
    </li>
    <form class="navbar-form pull-left">

    <input type="text" class="form-control" placeholder="Search this site…" id="searchInput">
    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
    </form><!– end navbar-form –>

    <ul class="nav navbar-nav pull-right">

    <li class="dropdown">

    <a class="dropdown-toggle" href="#" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>My Account <strong class="caret"></strong></a>

    <ul class="dropdown-menu">

    <li>
    <a href="#"><span class="glyphicon glyphicon-wrench"></span>Settings</a>
    </li>
    <li>
    <a href="#"><span class="glyphicon glyphicon-refresh"></span>Update Profile</a>
    </li>
    <li>
    <a href="#"><span class="glyphicon glyphicon-briefcase"></span>Billing</a>
    </li>

    <li class="divider">

    </li>
    <li>
    <a href="#"><span class="glyphicon glyphicon-off"></span>Sign Out</a>
    </li>

    </ul><!-end dropdown-menu->

    </li>

    </ul><!– end pull-right –>

    </ul><!-end nav –>

    </div><!-end container –>

    </div> <!-end navbar –>

    <div class="carousel slide" id="MyCarousel">

    </div><!– end my carousel –>

    <div class="row" id="bigCallout">

    </div><!-end bigCallout –>

    <div class="row" id="featuresHeading">

    </div><!-end featuresHeading –>

    <div class="row" id="features">

    </div><!-end features –>

    <div class="row" id="moreInfo">

    </div><!– end moreinfo –>

    <div class="row" id="moreCourses"

    </div><!-end moreCourses –>
    </div><!-end container –>

    What am I missing?

  • Aasim Azam says:

    Hi Brad,

    I am not getting the responsive part of the nav bar, when you make the browser smaller It makes the menu a list instead of disappearing, like your one. I have not put in a logo as I don't need/want to. Am I missing something?

  • TJ Flynn says:

    Nice job Brad!  Great way to teach, by showing the end result and then breaking it down into small lectures.  I have gotten more of this set of videos then any other free online course or book.

  • Law Viktor says:

    I inserted  &nbsp before My Account, Settings, Update Profile, Billing, Sign Out, hehe! It looks nicer than they were before~~

  • Great lecture Brad, well laid out and easy to follow. Thanks

  • Mike Deluxy says:

    Real Quick…  At 6:24 in Vid you mention the Glyphicons…   Glyphicon (for bootstrap 3) can be previewed here:  http://getbootstrap.com/components/

  • Joe Pearson says:

    dropdown not working:

    <div class="nav-collapse collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
    <li class="active">
    <a href="#">Home</a>
    </li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <strong class="caret"></strong></a>
    <ul class="dropdown-menu">
    <li>
    <a href="#">Web Design</a>
    </li>
    <li>
    <a href="#">Web Development</a>
    </li>
    <li>
    <a href="#">SEO</a>
    </li>
    <li class="divider"></li>
    <li class="dropdown-header">More Services</li>
    <li>
    <a href="#">Content Creation</a>
    </li>
    <li>
    <a href="#">Social Media Marketing</a>
    </li>
    </ul> <!– end of dropdown-menu–>
    </li>
    </ul> <!– end of nav navbar-nav –>

  • Thank you Brad! I'm not a web-designer but i enjoyed this lesson too.. I actually love to develop a website if i have a real good instructor….Good job mate! Can i ask you a litle thing? why "my account" (the word, the caret and the little image) is still in light-blue and not in black like yours? Thank you so much!!

  • Jigar Mehta says:

    Hey Brad,

    How can we align the icon-bar(menu link) to left when you resize the browser?

  • GucciGaming says:

    Hey Brad!
    Thanks for these awesome tutorials! I have two quick questions. 
    1. The My Account dropdown that we put in is next to the search bar rather than being on the right side of the container even though I have it pulled right. Why would that be?
    2. I was thinking if, as a developer, you actually use bootstrap on a daily basis. Like, ya it's nice on paper, but do you think an aspiring developer should actually learn it rather than normal html5/css3/javascript/php/etc. or it better to learn the original way?

    Thanks Again!
    ~ Nathan

  • Great tuts, Brad, but I have a problem. If I add class "collapse" all nav items display: none; 

    But when the screen becomes small, the bar-icon appears and when clicked collapses.

    How can I fix this? It also seems that using 3.3.1 version is different because I have some points which do not work for me. Perhaps of the course files which I do  not have but I do have all bootstrap 3.3.1 components. 

  • Chase Young says:

    Is it possible to resize the navbar height for my logo?

  • Omat Borje says:

    hi brad. I my drop menu isn't working pelase help
    code :
    <div class="nav-collapse nav-responsive-collapse">
    <ul class="nav nav-tabs " id="headerMenu" role="tablist">
    <li><a href="index.php" href="active">Home </a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropwon">About us</a>
    <ul class="dropwon-menu">
    <li>
    <a href="#">history</a>
    </li>
    <li>
    <a href="#">function</a>
    </li>
    <li>
    <a href="#">owners</a>
    </li>

    </ul>

    </li>

    <?php if(logged_in()==true AND $user_data['type']=='doctor'){?>
    <li><a class = "<?php echo $profile; ?>" href="doctordashboard.php">Profile</a></li>
    <?php } ?>
    <li><a class = "<?php echo $doctor; ?>" href="doctors.php">Doctor</a></li>

    </ul>
    </div><!– End nav-collapse–>

  • Sorry another question. With the drop down menus, is it possible for them to snap to full width @media(max-width: 480px)? My Account drop down items stack below each other and the white space within the drop down area fills the width to the edge of its parent button above naturally but I cant seem to make the same happen for the drop down lists in the rest of my menu. Have tried

    @media(max-width: 768px){
    .open > .dropdown-menu {
    display: inline-block;

    }

    but that doesn't seem to work. What do I need to target to change the width of the drop down area? 

    Thank you in advance 🙂 

  • Hey all,
    Just looking at the current bootstrap glyphicons they look to have been updated.

    I have looked on the http://getbootstrap.com/ site downloaded and had a quick look through the source code and did a quick search through google but i'm not good enough as all this to know what I'm really looking for.
    I have found the .eot .svg .ttf and .woff files in the source code download pack from http://getbootstrap.com/getting-started/#download but cant see a .css file.

    Does anyone know how can I update the gliphicons to the latest vershion? 

  • Hey Brad, how do i change the size of the search bar? Would like to increase it without loosing the responsive thing for small devices. Ty

  • Hi Brad. First of all, thank you for the videos! Unquestionably the best way to get started! I have a question about the dropdown menu list. I was trying to change a few css parameters, and did it with no major problems. However, I'm unable to find the right selector to change the blue color when we hover the dropdown menu list. I've already tried a lot of different things, but none of them seemed to work. :/ 

  • Hi Brad. I have one question. Hope you can help. I thought that HTML doesn't care about empty spaces. When we added glyphicons to my account dropdown menu, HTML suddenly knows about empty spaces. Why does empty space matter after span closing tag? 🙂

    <li>
    <a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a>
    </li>

    Thank you for your tutorial 😀 

  • Sanal MG says:

    I've been searching for a good bootstrap tutorial. Thanks a ton for this tutorial and your time. You are the best, explained it all like a Pro.  God Bless You 🙂

  • theres one thing i like to do since i like the glyphicon to be baseline with account list items 

    u can specify class in these <li class="bs"> for settings update and bla bla

    in the style.css

    .bs{

     vertical-align: middle;

    it will look neat better ^_^ .

    i think mr.brad may have better idea.

    thanks teacher for this tutorial.

  • jasan says:

    for some reason my my formatting is off when the navbar is collapsed. the search box is inline with My account dropdown and the search button is below the two of them. Any suggestions?

  • What on-screen-camera are you using! Thanks you have helped me a lot with bootstrap 3.

  • Nathon Jones says:

    Hi Brad. At the end of this tutorial you correct a problem which you describe as being caused by the logo being larger than the default settings for the navbar – I assume height settings.  Rather than add padding to navbar-brand, in the CSS, is it possible to change the navbar height so that the navbar matches the height of the logo?  Really appreciate these tutorials.  Thanks man.

Leave a Reply

Archives