HomeОбразованиеRelated VideosMore From: Quentin Watt Tutorials

Bootstrap tutorial 18 - Navbar

356 ratings | 69659 views
In this tutorial I explain how the navbar works in boostrap. Useful links: ----------------------------------- Don't forget to subscribe: www.youtube.com/QuentinWatt Follow me on Twitter: www.twitter.com/QuentinWatt Follow me on Facebook: www.facebook.com/quentin.watt Feel free to donate: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CH68DBULMJ37N ------------------------------------
Html code for embedding videos on your blog
Text Comments (33)
BuzzAround (1 year ago)
Nice tutorial. I want to add logo and company name as text in navbar-brand area. Trying to figure it out without luck. Could you please assist?
Cheryl Callahan (1 year ago)
Excellent tutorials, I've watched them all except forms so far. Thank you!!
Aly Tarek (1 year ago)
data-toggle or data-target are not working in my code when in run them what's the problem quentin??
Mohammed Mayat (1 year ago)
how do i change backgound color of nav bar i have tried adding my css but nothing changed <nav class="my_navbar navbar navbar-default navbar-fixed-top"> css .my-navbar{ background-color:red; }
Amber Marie (1 year ago)
<nav class="my_navbar navbar navbar-default navbar-fixed-top" style="background-color:red;">
Maani Iftikhar (1 year ago)
blackhawks 88 give the nav bar a parent and add. "! Important" your css background-color: red ! Important ;
Andrew Donald (1 year ago)
Your tuts are out of this world
Haider A (1 year ago)
Hi, thanks for your efforts, i have a persisting problem, non of my buttons click, even the drop down menu doesn't drop down, i noticed this before i pasted this code in the first green button in tutorial 2, it was working fine, and was hiding when i click it (using hide()), but suddenly for no reason it just stopped clicking, I created another button for testing in the current navigation code (<a href="http://google.com" class="btn btn-default">Go to Google</a>) and it works, but all other buttons do not...any idea why?
Haider A (1 year ago)
Never mind, I found the solution here (for those who may encounter the same problem) : https://stackoverflow.com/questions/22383547/bootstrap-dropdown-menu-is-not-working
UltimateDanS (2 years ago)
He explains the collapse button a lot better on tutorial number 19.
Brian Davis (2 years ago)
I have an off-topic question... How do I get a search form to actually perform searches? That is the part I am confused about :)
Veenit Kumar (2 years ago)
I need help Regarding navbar...is anyone there who could help me ????
sreelu srikanth (2 years ago)
i want to create menu and horizontal submenu ...... submenu should react when i hit menu
Agaj Cdr (2 years ago)
Say that i want to change the height of the navbar and still have all the elements in center, what do i do?
putu setiawan (2 years ago)
please teach me how to make navbar menu auto active when our cursor choose the navbar menu
Up4lIFe (2 years ago)
I don't know but the drop down won't work although I copied it fully.
The Web Master (1 year ago)
You may have altered some of the bootstrap files you downloaded, try re-downloading them and try again.
Joshua Chew (2 years ago)
Up4lIFe Same...
goldenseal50 (2 years ago)
so should I use the nav bar fixed to bottom as a footer? I couldn't find a bootstrap footer.
Quentin Watt Tutorials (2 years ago)
I suppose you could try a <footer> tag with the same fixed classes. It should work. :)
Jos Bogers (2 years ago)
Hi Quentin, Nice video ! And even for a Dutchman easy to understand. Thank you! . I wonder if it is posible to get the navbar transparent in bootstrap (say 0.6) over the header image of 1920x550px ? thank you, regards,Jos
suhaib (2 years ago)
keep it up
Momin Parveez (2 years ago)
fix dropdown not working,, delete the current jquery version if its 3.0 and download jquery version below 3.0 and higher than 1.9 https://blog.jquery.com/2016/05/20/jquery-1-12-4-and-2-2-4-released/ link is for jquery version 2.2.4 bootstrap 3.3.6 is not compatible with jquery 3.0
Taylor Lewis (2 years ago)
Thank you for your Tutorials! Keep up the great work. I like how you explain what the code does! Thanks.
Chris Sylvester (3 years ago)
Thanks for the great tutorial Quentin. I have one question. How do I put external links (for other pages of my website) in navbar <a> items. I have done this but its not working....
Jacques du Preez (3 years ago)
So strange to watch such a professional tutorial series from a fellow SA'n.
Khurram Iqbal (3 years ago)
I. am having problems in creating the dual navbars. Could you please let me know how to create a dual navbar where both the navbars side by side one after the other. Thankyou
Andrius Kankevičius (3 years ago)
I can't understand how leave pc version of navbar same as yours, and in mobile version make search search dropdown and just then input and submit buttons shows up.
khantiffany (3 years ago)
Hi Quentin, Thanks for another great video. Is there a way of uploading or sending you an image in a jpg format? I have a screenshot of several nav bars that I am trying to recreate, but describing them wouldn't be nearly as helpful. I'm trying to style a nav bar and make it look like post-its.
Aleksandar (3 years ago)
I agree with Mr. Abhishek Nigam. There are a lot of unexplained stuff in this code. It'll be nice to explain it so we can know when and how to use them later. e.g. class "aria-expanded" or why is in class "data-target" used "#" and in class "id" there is no "#" (in "bs-example-navbar-collapse-1") or what "bs-example-navbar-collapse-1" doing? etc. Thank you!
ionara wilson (3 years ago)
Thank you for the videos! The code I downloaded has the container-fluid class but the navigation bar doesn't take all the browser space.
ionara wilson (3 years ago)
+ionara wilson I figured it out. I had to remove the outer div with a class called container
Abhishek Nigam (3 years ago)
Hi Quentin! Great work. 'have learn't a lot from your series. Just want request you to make a more detailed-explanation of this video, the classes that have been used. Thanks

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.