Responsive Navbar with Bootstrap 4


Upgrade your Clever Techie learning experience:

UPDATE! (9/13/19) New features and improvements for Clever Techie Patreons:

1. Download full source code with detailed comments – easy to learn and understand code
2. Weekly source code file updates by Clever Techie – every time I learn new things about a topic I will add it to the source file and let you know about the update – keep up with the latest coding technologies
3. Library of custom Clever Techie functions with descriptive, easy to understand comments – skyrocket coding productivity, code more efficiently by using Clever library of custom re-usable functions
4. Syntax code summary – memorize and review previously learned code faster
4. Organized file structure – access all Clever Techie lessons, source code, graphics, diagrams and cheat sheet from a single workspace – no more searching around for previously covered material and source code – save enormous amount of time and effort
5. Outline of topics the source file covers – fast review of all previously learned coding lessons
6. Access to all full HD 1080p videos with no ads
7. Console input examples – interactive examples that make it easier to understand and learn coding
8. Access to updated PHP Programming Book by Clever Techie
Hey guys, I’m now using Patreon to share improved and updated video lesson material. For a small fee you can access all the downloadable files from this lesson (source code, icons & graphics, cheat sheets) and everything else included in the video from the Patreon page. Additionally, you will get access to ALL Clever Techie videos in HD format with no ads. Thank you so much for supporting Clever Techie 🙂

Download this video’s files here:

( You also get access to ALL source code and any downloadable content of ALL Clever Techie videos, as well as access to ALL videos in HD 1080p quality format with all video ads removed! )


( Website ) – PHP, JavaScript, WordPress, CSS, and HTML tutorials in video and text format with cool looking graphics and diagrams.

( YouTube Channel )

( Google Plus ) – clever techie video tutorials.

( Facebook )

( Twitter )



  1. Good afternoon, It is possible in this example of the link:

    Place menus next to the Album text, the menus horizontally, as below:

    Album Home Link1 Link2 Disabled Dropdown ▼

  2. <button class="navbar-toggler" data-toggler="collapse" data-target="#collapse_target">

    <span class="navbar-toggler-icon"></span>


    <div class="collapse navbar-collapse" id="collapse">

    if click on button dont can see the menu… where is the error? thanks

  3. sorry for asking this but did anyone know how to fit the image into "jumbotron"?
    I tried many times but still fail if anyone knows how to do it please do tell me…

  4. At 11:05 after reducing the size of the browser the button appears and when I click on the button the menu appears and closes immediately. what could be the issue?

  5. for some odd reason my span attribute in the class navbar-text it shows as a darker color from the rest of the nav bar? any recommendations? my html tags look the exact same yet different color outcome?

  6. what if i also want to collpase it in small sizes? can i use navbar-expand-sm? while using navbar-expand-md?

  7. Thank you, yesterday I spent the whole day trying to make the damn navbar work as I intended and I've found your video when I was going to take a brake, I decided to leave it for today and it worked perfectly!


Please enter your comment!
Please enter your name here