collapsible navigation bar become invisible on mobile screen

Question

I am trying to implement twitter bootstrap collapsible navigation bar. On Desktop navigation bar is visible but on mobile screen it's not visible. Here is View Part

<div class="masthead clearfix">
                    <div class="inner">
                        <h3 class="masthead-brand"><img src="/x/img/X.png" style="width:80px; position:relative; top:-20px;"></img></h3>
                        <div class="container">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>

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

                                <ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)">

                                    <li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a></li>

                                    <li ><a th:href="@{/X}" href="#">X</a></li>
                                    <li><a th:href="@{/Y}" href="#">Y</a></li>
                                    <li><a th:href="@{/Z}" href="#">Z</a></li>
                                    <li><a th:href="@{/T}" href="#">C</a></li>
                                    <li class="active"><a th:href="#" href="#">Blog</a></li>
                                    <!--li><a href="#">Help</a></li-->
                                </ul>
                            </div><!--/.nav-collapse -->
                        </div>
                    </div>
                </div>

Can some one help me to fix this issue. I have included collapse.js in my path.

Answer 1

You're missing the navbar class which is the first line of the default navigation in Bootstrap. See Docs.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="masthead clearfix">
  <div class="inner">
    <h3 class="masthead-brand"><img src="http://placehold.it/350x150" style="width:80px; position:relative; top:-20px;"></img></h3>

    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

          </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)">
            <li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a>

            </li>
            <li><a th:href="@{/X}" href="#">X</a>

            </li>
            <li><a th:href="@{/Y}" href="#">Y</a>

            </li>
            <li><a th:href="@{/Z}" href="#">Z</a>

            </li>
            <li><a th:href="@{/T}" href="#">C</a>

            </li>
            <li class="active"><a th:href="#" href="#">Blog</a>

            </li>
            <!--li><a href="#">Help</a></li-->
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
    </nav>
  </div>
</div>