Dropdown menu doesn't work from tutorial

i have a code from a tutorial in youtube. I was stuck because it doesn't work while i already added its bootstrap js and others. Please help me . Thanks.

Here is the code from tutorial dropdown menu:

<div class="navbar navbar-inverse navbar-static-top">

    <div class="container">
        <a href="#" class="navbar-brand">Site Tittle</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>
        </button>

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

          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li class="dropdown">

              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a>
              <ul class="dropdown-menu">
                  <li><a href="#">Twitter</a></li>
                  <li><a href="#">Facebook</a></li>
                  <li><a href="#">Google+</a></li>
                  <li><a href="#">Instagram</a></li>
              </ul>
            </li>
            <li><a href="#">About</a></li>
          </ul>
        </div>
    </div>
  </div>

Here is links :

<link href="<?php echo base_url('assets/css/bootstrap.css');?>" rel="stylesheet">
  <link href="<?php echo base_url('assets/css/bootstrap.min.css');?>" rel="stylesheet">
  <link href="<?php echo base_url('assets/css/bootstrap-theme.css');?>" rel="stylesheet">
  <link href="<?php echo base_url('assets/js/jquery.min.js');?>" rel="stylesheet">

Answers


<script src="<?php echo base_url('assets/js/jquery.min.js');?>"></script>

you're including a js file as stylesheet


Without a working code, I can only guess.

But my guess is because of this:

data-target=".navHeaderCollapse"

Try to remove the period.

And I think navHeaderCollapse should be an id.


try adding

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

and .navHeaderCollapse was correct. Don't change it.


You forgot the bootstrap js file:

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

With this line it should work.


Need Your Help

Bootstrap: working with LESS, what's the good way?

css twitter-bootstrap less semantic-markup

I have a couple of questions I hope you help me to clarify about working with semantic markup, using less with bootstrap 3 mixins.

How do I change an individual bubble's color and opacity in HighCharts?

javascript highcharts

I have created a HighCharts BubbleChart and am trying to make adjustment to the color and opacity of an individual bubble. I seem to be able to adjust the color but the opacity stays fixed at 0.5 (...