offcanvas menu doesn't disappear when changing screen size

[hadryounes]

Hi,

I'm using Jasny's bootstrap extension for bootstrap v3.3.2 and Jquery 1.11.2.

My problem is, when the offcanvas menu is opened while the browser is on phone and tablet screens sizes, the offcanvas menu doesn't disappear.

P.S. the mobile and desktop headers elements are differents.

Thanks

[shweiki]

I make sure you have the basics of writing code by bootstrap

[shweiki]

like that

                  <style>  
         .form-control_search {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
     </style>

      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height: 50px;">
      <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="../../Cards_Arabic/index.php">...........
      </a>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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" href="#"> <span> ............</span> </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
              <li><a href="index.php"><span class="glyphicon glyphicon-home"></span>.........</a></li>
              <li><a href="About.php"><span class="glyphicon glyphicon-info-sign"></span>...........</a></li>

          </ul>
         <ul class="nav navbar-nav">
             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
          </ul>
               <ul class="nav navbar-nav">
                   <form action="search.php" method="POST"  style="display: flex; ">

                    <li style="margin-top: 9px; width: 350px; max-width: 75%;">

               <input type="text" class="form-control_search" name="search"  placeholder="Search Cards" style=" text-align:  left;  "id="inputSuccess1">

                    </li>
                        <li style="margin-top: 9px;">

                     <button type="submit" class="btn btn-default" style="height: 34px;">

  <span class="glyphicon glyphicon-search"></span> 
</button>

                   </li>

              </form>

          </ul>
              <ul class="nav navbar-nav navbar-right">
        <li class=""><a href="sign_in.php"><span class="glyphicon glyphicon-log-in"></span>...........</a></li>

        <li class="" > <a href="sign_up_1.php"><span class="glyphicon glyphicon-user"></span>...........</a></li>
         </ul>
        </div>
      </div>
    </nav>

[shweiki]

copy this in your page and run

[hadryounes]

Yes I do, everything from bootstrap seems fine. I didn't touch any bootstrap file

[shweiki]

u have but this file or links

[shweiki]

<script type="text/javascript" src="bootstrapvalidator-master/vendor/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrapvalidator-master/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrapvalidator-master/dist/js/bootstrapValidator.js"></script>