Not able to click on drop down menu on Nav bar

Question

I am using simple nav bar with drop downs. However I am not able to click on any of them. Below is the code

.search-box{
    margin-top: 10px;
    width: 200px;
    border-radius: 5px;
}
#btn1{
    background-color:transparent;
}

.top-banner{
    text-align: center;
    background-color:#595959 ;
}

.dropdown-menu {
    min-width: 200px;
}

.dropdown-menu.columns-3 {
    min-width: 600px;
}
.dropdown-menu li a {
    padding: 5px 15px;
    font-weight: 300;
}
.multi-column-dropdown {
    list-style: none;
}
.multi-column-dropdown li a {
    display: block;
    clear: both;
    line-height: 1.428571429;
    color: #333;
    white-space: normal;
}
.multi-column-dropdown li a:hover {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}

@media (max-width: 767px) {
    .dropdown-menu.multi-column {
        min-width: 240px !important;
        overflow-x: hidden;
    }
}

<div class="row" id="top-banner">

        <div class="col-xs-12 col-sm-11">
            <nav class="navbar navbar-inverse bg-inverse">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" >Movie Flix</a>
                    <input type="search" class="search-box" placeholder="Search" >
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Select Type <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Movies</a></li>
                                <li><a href="#">Series</a></li>

                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Genre <b class="caret"></b></a>
                            <ul class="dropdown-menu multi-column columns-3">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Adventure</a></li>
                                            <li><a href="#">Sci-Fi</a></li>
                                            <li><a href="#">Thriller</a></li>
                                            <li><a href="#">Crime</a></li>
                                            <li><a href="#">News</a></li>
                                            <li><a href="#">Talkshow</a></li>


                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Drama</a></li>
                                            <li><a href="#">Fantasy</a></li>
                                            <li><a href="#">Comedy</a></li>
                                            <li><a href="#">History</a></li>
                                            <li><a href="#">Biography</a></li>
                                            <li><a href="#">Documentary</a></li>
                                            <li><a href="#">War</a></li>


                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Mystery</a></li>
                                            <li><a href="#">Romance</a></li>
                                            <li><a href="#">Western</a></li>
                                            <li><a href="#">Animation</a></li>
                                            <li><a href="#">Horror</a></li>

                                            <li><a href="#">Family</a></li>

                                        </ul>
                                    </div>
                                </div>
                            </ul>
                        </li>


                    </ul>
                </div>
                <!--/.navbar-collapse-->
            </nav>
        </div>


    </div>

I am using Gulp to add all the dependencies, After adding dependencies my index.html looks like

<!DOCTYPE html>
<html lang="en" ng-app="movieflix">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<!--bower:css -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<!--endinject-->
<!--vendor:css-->
<!--endinject-->
<!--inject:css-->
<link rel="stylesheet" href="styles/catalog.tmpl.css">
<!--endinject-->
<!--app:css-->
<!--endinject-->
<body>
<header>

</header>
<section  ng-view>

</section>
<footer>

</footer>
<!--bower:js-->
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!--endinject-->
<!--inject:js-->
<script src="app/modules/movieflixmodule.js"></script>
<script src="app/services/login.service.js"></script>
<script src="app/services/catalog.service.js"></script>
<script src="app/controllers/signup.controller.js"></script>
<script src="app/controllers/login.controller.js"></script>
<script src="app/controllers/catalog.controller.js"></script>
<script src="app/app.js"></script>
<!--endinject-->

<!--vendor:js-->
<!--endinject-->

<!--app:js-->
<!--endinject-->
</body>
</html>

Below is my Gulp file

gulp=require('gulp'),
clean =require('gulp-clean'),
inject=require('gulp-inject'),
bowerfiles=require('main-bower-files'),
gulpfilter=require('gulp-filter'),
angularFileSort=require('gulp-angular-filesort'),
concat=require('gulp-concat'),
cleanCss=require('gulp-clean-css'),
cleanJS=require('gulp-uglify'),
merge=require('merge-stream'),
browserSync=require('browser-sync').create();

var config={
  paths:{
      src:'./src',
      build:'./build',
      bower:'./bower_components'
  }
};

gulp.task('clean',function(){

return gulp.src(config.paths.build,{read:false}).pipe(clean());
});

gulp.task('inject',function(){
   var cssFiles=gulp.src([config.paths.src+'/**/*.css'],{read:false});

   var jsFiles=gulp.src([config.paths.src+'/**/*.js']);

   return gulp.src(config.paths.src+'/index.html').
   pipe(inject(gulp.src(bowerfiles(),{read:false}),{name:'bower'}))
       .pipe(inject(cssFiles,{
       ignorePath:'src',addRootSlash:false
   })).
   pipe(inject(jsFiles.pipe(angularFileSort()),{
       ignorePath:'src',addRootSlash:false
   })).pipe(gulp.dest(config.paths.build));

});

gulp.task('serve',['inject'],function(){
    browserSync.init({
        server:{
            baseDir:[config.paths.build,config.paths.bower,config.paths.src],
            routes:{
             '/bower_components':'bower_components'
            }
        },
        files:[
            config.paths.src+'/**'
        ]

    })
});

gulp.task('minifyCss',function(){
var vendorStyles=gulp.src(bowerfiles()).pipe(gulpfilter(['**/*.css'])).
    pipe(concat('vendor.min.css')).
    pipe(cleanCss({debug:true})).
    pipe(gulp.dest(config.paths.build+'/styles'));

var appStyles=gulp.src(config.paths.src+'/**/*.css').
    pipe(concat('app.min.css')).
    pipe(cleanCss({debug:true})).
    pipe(gulp.dest(config.paths.build+'/styles'));

return merge(vendorStyles,appStyles);
});

gulp.task('minifyJS',function(){
    var vendorJS=gulp.src(bowerfiles()).pipe(gulpfilter(['**/*.js'])).
        pipe(concat('vendor.min.js')).
        pipe(cleanJS({debug:true})).
        pipe(gulp.dest(config.paths.build+'/scripts'));

var appJS=gulp.src(config.paths.src+'/**/*.js').
    pipe(angularFileSort()).
    pipe(concat('app.min.js')).
    pipe(cleanJS({debug:true})).
    pipe(gulp.dest(config.paths.build+'/scripts'));

return merge(vendorJS,appJS);


});

gulp.task('html',function(){
    return gulp.src([config.paths.src+'/**/*.html','!'+config.paths.src+'/index.html'])
        .pipe(gulp.dest(config.paths.build));

});

gulp.task('fonts',function(){
    return gulp.src(bowerfiles()).pipe(gulpfilter(['**/*.{svg,eot,tt,woff,woff2}'])).
        pipe(gulp.dest(config.paths.build+'/fonts'));
});

gulp.task('other',function(){
    return gulp.src([config.paths.src+'/**/*','!**/*.html','!**/*.css','!**/*.js']).
        pipe(gulp.dest(config.paths.build+'/other'));
});


gulp.task('build',['html','fonts','other','minifyJS','minifyCss'],function(){
    var vendorFiles=gulp.src([config.paths.build+'/styles/vendor.min.css',config.paths.build+'/scripts/vendor.min.js'],{read:false});
    var appFiles=gulp.src([config.paths.build+'/styles/app.min.css',config.paths.build+'/scripts/app.min.js'],{read:false});


    return gulp.src(config.paths.src+'/index.html').
        pipe(inject(vendorFiles ,{name:'vendor',ignorePath:'build',addRootSlash:false})).
        pipe(inject(appFiles,{name:'app',ignorePath:'build',addRootSlash:false})).
    pipe(gulp.dest(config.paths.build));

});

I was not able to figure what is wrong with my code. I am not able to click on the drop downs on nav bar.

Can someone tell me what is wrong with my code. Apologies for dumping all the code.

Appreciate any help

Thank you

Answer 1

Include the jquery.js script before the bootstrap.js in footer.

Answer 2

Here is the fiddle: https://jsfiddle.net/besr6sju/

<div class="row" id="top-banner">

    <div class="col-xs-12 col-sm-11">
        <nav class="navbar navbar-inverse bg-inverse">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" >Movie Flix</a>
                <input type="search" class="search-box" placeholder="Search" >
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Select Type <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Movies</a></li>
                            <li><a href="#">Series</a></li>

                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Genre <b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-3">
                            <div class="row">
                                <div class="col-sm-4">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Adventure</a></li>
                                        <li><a href="#">Sci-Fi</a></li>
                                        <li><a href="#">Thriller</a></li>
                                        <li><a href="#">Crime</a></li>
                                        <li><a href="#">News</a></li>
                                        <li><a href="#">Talkshow</a></li>


                                    </ul>
                                </div>
                                <div class="col-sm-4">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Drama</a></li>
                                        <li><a href="#">Fantasy</a></li>
                                        <li><a href="#">Comedy</a></li>
                                        <li><a href="#">History</a></li>
                                        <li><a href="#">Biography</a></li>
                                        <li><a href="#">Documentary</a></li>
                                        <li><a href="#">War</a></li>


                                    </ul>
                                </div>
                                <div class="col-sm-4">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Mystery</a></li>
                                        <li><a href="#">Romance</a></li>
                                        <li><a href="#">Western</a></li>
                                        <li><a href="#">Animation</a></li>
                                        <li><a href="#">Horror</a></li>

                                        <li><a href="#">Family</a></li>

                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>


                </ul>
            </div>
            <!--/.navbar-collapse-->
        </nav>
    </div>


</div>

Your dropdown is working fine. Can you please specify the exact issue?