Tue. Dec 10th, 2019

Host your Website

Read and learn

FatCow Web Hosting $1.00/mo* Trust your web hosting to the #1 web host provider, GoDaddy!

[#6] The Navbar – Code Responsive Websites with Bootstrap 3

2 min read

Lecture 6: In this lecture, we code the HTML for the navigation bar.

CONTINUE THIS COURSE FOR FREE AT CODE COLLEGE: http://codecollege.ca/courses/code-responsive-website-bootstrap?product_id=2174&coupon_code=YOUTUBER

DOWNLOAD FINAL COURSE FILES: https://app.convertkit.com/bradhussey/bcf?ref=YouTubeLecture6


If this course has helped you immensely, I very graciously accepted donations of any amount to help me create EVEN MORE amazing FREE content: http://bradhussey.ca/donate


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.

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.

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!

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

“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/

45 thoughts on “[#6] The Navbar – Code Responsive Websites with Bootstrap 3

  1. Hi there. If anyone could please tell me how to add 11 or 12 elements in navbar like home , about us etc along with logo. When I add 8th element on right side after putting logo in navbar , the nav elements go down and it does not remain align with logo. How to fix that in bootstrap. Thanks

  2. When I change the color of the navbar, only the parts with text have a background color. So there is a gap in the middle of the navbar. What did I do wrong?

  3. Man!!! I finally figured out what I did wrong XD. Next time I'm gonna use the word search to make sure I've spelt things correctly. I checked glyphicon so many times and I thought it was spelt right 8|

  4. Im using bootsrap 3.3.7 , if i put class="navbar-brand" first before the <img src it doesn't do anything the image/logo doesn't fit in the navbar. however , after doing it like this <a href="/"> <img src="sample.jpg" alt="sample" class="navbar-brand"</a> the logo fits inside the nav bar. i dont know whats the problem.
    and also this <div class="navbar navbar-fixed-top"> is not working another class "navbar-default " or
    "navbar-inverse" needs to be added.

  5. Does the version of Bootstrap matter? Ive tried following these tutuorials with another version of bootstrap (properly linked) but the navbar just wont show. Then when I used the bootstrap given in the Course Files it suddenly worked. Can anyone clarify this?

  6. I'm attempting to have different heights for my navbar based on the width of the navbar. (60px for min-width 768, 90px for min-width 992, and 120px for minwidth 1200)
    How would you approach that?

  7. Your search field and my account were messed up because of that duplicate </ul>. If that duplicate was removed you need not write css for search bar to fix its position

  8. when i tried to change the icon <span class="glyphicon glyphicon-envelop"></span>My Account</a> why it didnt change into envelop icon.. explain pls sir brad.. 🙂

  9. Hi Brad Hussey,

    Could you help me with my navigation bar to make it active in every pages i want to click?

    Here's my Un – Ordered List with List items.

    <div class="navMenu">


    <li><a href="index.html">Home</a></li>
    <li><a href="#">Services</a></li>

    <li><a href="#">Sub Services</a></li>
    <li><a href="#">Sub Services</a></li>
    <li><a href="#">Sub Services</a></li>
    <li><a href="#">Sub Services</a></li>
    </ul><!-end of link LI->

    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="aboutUs.html">About Us</a></li>
    <li><a href="contact.html">Contact</a></li>

    </ul><!– end of main ul–>

    Much appreciated if you could help me to make this functional man. I'm just a newbie in website designing and now i'm stack on this part. By the way i'm using html and css.

  10. Hey! In my html file i follow all the code you type all the links but my button seems different from yours, <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> thats the code of my button but its background is gray not black, in the nav bar also, i need to put the class navbar-default so that it will display gray in your file it don't have but still it displays gray. Why is this happening.? Any idea.?

  11. CAN SOMEONE PLEASE HELP!!!!!!!! I have spent ALL WEEKEND 24/7….LITERALLY, trying to fix this stupid navbar and no matter how many tutorials I follow or how many different ways I've tried to create this responsive navbar it FAILS each and every time to work on install. I've even tried linking different jquery versions to it and that didn't work either. This is my code after following another tutorial:

    <div class="navbar navbar-default navbar-static-top">
    <div class="container">
    <div class="navbar-header">
    <a href="index.html" class="navbar-brand">LAW GROUP</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <div class="collapse navbar-collapse navHeaderCollapse">
    <ul class="nav navbar-nav navbar-right">

    <li><a href="practice areas.html">PRACTICE AREAS</a></li>
    <li><a href="accidents.html">ACCIDENTS</a></li>
    <li class="active"><a href="attorneys.html">ATTORNEYS</a></li>
    <li><a href="contact us.html">CONTACT US</a></li>



    This is my navbar following a different tutorial. It toggles in Dreamweaver but it does not toggle on install either. Please excuse my messy coding I'm SOOOOOOO TIRED of this and just REALLY NEED it to work like YESTERDAY!

    <div class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid" style="background-color:#011e36;">

    <div class="header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <a href="index.html" id="logo" class="navbar-brand">Law Group</a>


    <div class="collapse navbar-collapse" id="mainNavBar">
    <ul class="nav navbar-nav">

    <li><a href="practice areas.html">PRACTICE AREAS</a></li>
    <li><a href="accidents.html">ACCIDENTS</a></li>
    <li><a href="attorneys.html">ATTORNEYS</a></li>
    <li><a href="contact us.html">CONTACT US</a></li>


    <div class="clearfix"></div>

    </div> </div>

  12. I'm having a hard time with shrinking the search bar. I use Notepad++ (This shouldn't break anything, right?) Here is my CSS:
    /* ————————————–
       ————————————– */
    #searchInput {
    width: 200px;

    And my HTML Button
    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" id="searchInput"></span></button>

    What am I doing wrong?

  13. I am using bootstrap 3.3.5 now and have  encountered both problems noted by Miguel Rivas and Matej Jostiak.
    I realize that you completed this tutorial set a while back, but have you looked at how it behaves in newer versions specifically as to visibility as it otherwise seems to be fine.
    It also seems that the newer versions of Bootstrap have rolled the glyphicons into the package, but I haven't completely checked/confirmed that yet

  14. I love these kinds of tutorials! Straight to the point and well explained..however….why am i always having a strange feeling about all this bootstrap jingle jangle….

    Before any of all these grid systems people coded websites by hand….and they were special cause they had some knowledge of how things actualy worked. 

    Nowadays, you only need to be good at reading a manual and copy paste..

    No bashing….just, am I the only person feeling this way???

  15. Hey Brad, do you know if anyone who has completed your course using the updated version of bootstrap (v3.3.4) has source code that they would be willing to share? Most things still work and involve only minor tweaks, but I've run into some problems with my navbar. I can't seem to figure out what else I need by looking at the online Bootstrap documentation.

  16. Awesome tutorial. As much as I can figure out why you used both nav and navbar-nav on <ul> I wish however that you'd explain why exactly you put three different classes to make it responsive (nav-collapse collapse navbar-responsive-collapse), like what is the difference between those and what each of them triggers. Any hints?

  17. Probably a very simple solution to this problem, but I can't get my CSS file to affect my index file. I'm on Windows so is that perhaps affecting this? What steps should I take to resolve this? 

Comments are closed.

Copyright © All rights reserved. | Newsphere by AF themes.