Bootstrap 3.3.7 navbar collapse doesn't work

Question

I'm new in bootstrap and trying to toggle navbar but the button doesn't work at all. I tried several jQuery versions but it couldn't help. I am so confused. In addition, I'm using bootstrap.rtl.

Here is my code:

    <head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-rtl.min.css" rel="stylesheet" />
    <link href="Content/main.css" rel="stylesheet" />

    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/bootstrap-rtl.min.js"></script>
    </head> 
        <nav class="navbar navbar-inverse" style="background-color: 
      #330033">
            <div class="container-fluid" style="padding-right: 0px">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" 
      data-toggle="collapse" data-target="#navbar-collapse-zagros" aria-
    controls="zagros">
                        <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" style="padding-left:8px" 
   href="#">زاگرس تیکتینگ</a>--%>
                    <div style="background-image: url('Images/logo-
   zagros.png'); background-repeat: no-repeat; width: 124px; height: 70px;">
  </div>
                </div>

                <div class="collapse navbar-collapse" id="navbar-collapse-
  zagros">
                    <ul class="nav navbar-nav ">
                        <li class="active "><a class="text-center" href="#">
     <i class="glyphicon glyphicon-dashboard white"></i>
                            <br />
                            داشبورد</a></li>
                        <li><a class="text-center" href="#"><i 
     class="glyphicon glyphicon-th-large white"></i><br />بخش ها</a></li>
                        <li><a href="#" class="text-center"><i 
   class="glyphicon glyphicon-th white"></i><br />کاربران</a></li>
                        <li><a href="#" class="text-center"><i 
  class="glyphicon glyphicon-file white"></i><br />تیکت</a></li>
                        <li><a href="#" class="text-center"><i 
   class="glyphicon glyphicon-cog white"></i><br />تنظیمات</a></li>

                        <li class="dropdown"><a class="dropdown-toggle text-
   center" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-
   education white"></i><br />پایگاه اطلاعات<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                            </ul>
                        </li>

                        <li><a id="exit" href="#" class="text-center"><i 
     id="exitIcon"  class="glyphicon glyphicon-off white"></i><br />خروج</a>
    </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-left">
                        <li><a href="#" class="text-center" style="padding-
   top:23px"><i class="glyphicon glyphicon-log-in white" style="padding-
   left: 5px;"></i>ورود</a></li>
                        <li><a href="#" class="text-center" style="padding-
   top:23px"><i   class="glyphicon glyphicon-user white" style="padding-
   left: 5px;"></i>ثبت نام</a></li>
                    </ul>
                </div>
            </div>
        </nav>

Answer 1

Your collapse id is divided, so that's why doesn't work. It is looking like that:

id="navbar-collapse-
  zagros">

If you use it such that:

id="navbar-collapse-zagros">

It will work. Also you can check it : https://codepen.io/betuluzun/pen/vmvVJN

Bootstrap 3.3.7 navbar collapse doesn't work

Question

1 answers

solution1
0 2017-05-23 08:08:31

Bootstrap 3.3.7 navbar collapse doesn't work

Question

1 answers

solution1 0 2017-05-23 08:08:31

solution1
0 2017-05-23 08:08:31