• Thursday , 4 June 2020

Bootstrap tutorial 17 – Navigation

Code Canyon

In this tutorial I show you how to make a navigation in bootstrap.

Useful links:
Don’t forget to subscribe:

Follow me on Twitter:

Follow me on Facebook:

Feel free to donate:

Original source

3d Ocean

Related Posts


  1. Md Shajahan
    April 25, 2019 at 15:31

    wow, great tutorials @Quentin Watt. Hopefully it's nice to start to learning bootstrap from scratch

  2. Alex Battigelli
    April 25, 2019 at 15:31

    I've followed your steps and I've managed to do this incorrectly

  3. sai mahesh siva.p
    April 25, 2019 at 15:31

    sir i have doubt that you did not add any id to the navbar for drop-down as previous tutorial ????

  4. Patricia B
    April 25, 2019 at 15:31

    The classes: nav-pills and nav-tags, are not working

  5. G.Abbas Fatwani
    April 25, 2019 at 15:31

    hey! I've just made stacked nav-pills and I'm using active class into the first list item but the issue is that when ever I turn onto the other list item which is internally linked with the help of ID, my active class do not switch and even on scrolling my page it does the same .. please help me to fix this.

  6. Tubo-Ibim Braide
    April 25, 2019 at 15:31

    How can I add social media links with icons in my navigation bar using flexbox. I can't add icons to links to social websites e.g twitter, Facebook etc in my navigation bar. I would be most grateful for your kind assistance

  7. Lisa Pedrotti
    April 25, 2019 at 15:31

    Really great tutorial, by the way. I'm thoroughly enjoying this series and learning so much!

  8. Lisa Pedrotti
    April 25, 2019 at 15:31

    I would like to make my navbar fixed, but I don't want it at the very top of the page. I tried using the code "navbar navbar-fixed-top", but no dice. I tried it both inside and outside of the container with no success. I want it under my top page banner and fixed so that when you scroll, the navbar stays in place. Any suggestions?

  9. initialJT
    April 25, 2019 at 15:31

    My dropdown did not work right away after following the video, so I did this: add id="dropdownmenu" to dropdown <a>, and add aria-labelled-by="dropdownmenu" to <ul> like in the previous video. Used jQuery 2.2.4.js

  10. roshan arr
    April 25, 2019 at 15:31

    dropdown not working @quentin watt

  11. Lovepreet Sandhu
    April 25, 2019 at 15:31

    Nice tutorials Quentin. but i have an question about how can i change this dorpdowns menu to that when i hover the mouse on it show without click?

  12. Summer Wu
    April 25, 2019 at 15:31

    Great tutorial! Thank you Quentin.
    How can I make a pill navigation that drop down automatically when my mouse hover over it? Can Bootstrap do that? I'm a complete beginner. Sorry if this question is silly.

  13. Denny
    April 25, 2019 at 15:31

    Thanks for this tutorials Quentin.

    Quick question: how do i place my logo in the middle of the page and the navigation split at the left and right evenly? Thanks

  14. Francis D
    April 25, 2019 at 15:31

    Thanks for the tutorials Quentin. I see you get blue font and blue buttons and a different look than I do when doing the same on my end. I think I've got all the JS/CSS file correctly included. Is the look coming from your main.css file or bootstrap look isn't applying correctly ?

  15. Aleksandar
    April 25, 2019 at 15:31

    Thank you for tutorials! They are great!
    One question about this particular tutorial: why active button always stays blue – active, no matter what button you click? How to make button active when you click on it? Thank you!

  16. Dan Sonnyk
    April 25, 2019 at 15:31

    Hello Quentin, thanks for the tutorial but my drop down not work's, do you now any about this current problem? im using notpadd++ with Zen Coding

  17. Hemanth Zoro
    April 25, 2019 at 15:31

    Tab navigation is useful to me.well done #quentin watt

  18. Hemanth Zoro
    April 25, 2019 at 15:31

    Thank you

Leave A Comment

You must be logged in to post a comment.