jquery - django: bootstrap menu doesn't collapse on mobile device -
for project have use bootstrap. having default fixed navbar bootstrap examples included in base.html , trying out on mobile devices menu when tapped doesn't opened nor when desktop browser shrinked. here's bootstrap code i'm utilizing:
<!-- fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <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="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </b><a class="navbar-brand" href={% url 'home' %}>seida project</a></b> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href={% url 'home' %}>home</a></li> <li><a href={% url 'fileuploads' %}>upload files</a></li> <li><a href={% url 'fileprofile' %}>your files</a></li> <!-- <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a> --> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">nav header</li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="../navbar/">default</a></li> <li><a href="../navbar-static-top/">static top</a></li> <li class="active"><a href="./">fixed top <span class="sr-only">(current)</span></a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <br><div class="container"></br> <!-- main component primary marketing message or call action --> <div class="jumbotron"> <p>{% block content %}</p> <h3>welcome secure information dispersal information (seida) project </h3> <h5><p> seida project encodses file n unrecognizable segments such presence of m segments suffice recover file.</p></h5> <h5><p> using algorithm provides data high level of confidentiaty , availabality.</p></h5> <p> <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">view navbar docs »</a> </p> </div> </div> <!-- /container --> {% endblock%} <!-- bootstrap core javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jquery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../dist/js/bootstrap.min.js"></script> <!-- ie10 viewport hack surface/desktop windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
note: having bootstrap cdn included also.
there issues html code:
</b><a class="navbar-brand" href={% url 'home' %}>seida project</a></b>
must be:
<b><a class="navbar-brand" href={% url 'home' %}>seida project</a></b>
and commented line:
<!-- <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a> -->
but closing tag of li still exist right here:
</ul> </li> </ul>
and since want dropdown work, need uncomment li tag removing <!-- , --> surrounding it.
and last issue line:
<br><div class="container"></br>
the br tag can't written way, should be:
<br /> <div class="container"> or <div class="container"> <br /> depends on want.
here's working example of code, didn't try on django, js, css, , html combination. https://jsfiddle.net/azoughbi/rbyqxc86/
Comments
Post a Comment