BootStrap "navbar-toggle" class will open, but not close -

-

i'm creating navbar displays button when screen size below width; you've seen many other bootstrap sides. when button displayed , clicked, navigation links display in vertical dropdown, works intended.

the problem comes when try close dropdown re-clicking link. no matter remains open. after inspecting live site, looks class 'in' added on first click, not removed on subsequent clicks (the toggle function). i'm @ loss how correct this, believe links correct in header. have experience problem?

edit: clarification, understand write workaround in javascript document, don't want go down path if there more obvious solution. helping out beginner.

 <html>     <head>     <meta charset="utf-8">     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">     <link href="<?php echo get_bloginfo('template_directory'); ?>/javascipt/main.js">  <!-- personal js script (not sure better) icons -->     <link href="<?php echo get_bloginfo('template_directory'); ?>/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">  <!-- font awesome icons -->     <link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet">  <!-- personal css stylesheet -->     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>     <script src="<?php echo get_bloginfo('template_directory'); ?>/javascript/main.js"></script>  <!-- personal js script -->     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">     </script> <!-- bootstrap script --> <title><?echo get_bloginfo( 'name' ); ?></title> <?php wp_head(); ?> </head>      <body>     <div class="main contain">     <nav class="navbar navbar-inverse hold-top">               <div class="container-fluid">                 <div class="navbar-header">                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                                           </button>                   <a class="navbar-brand nav-logo2" href="<?php echo get_bloginfo( 'wpurl' ); ?>"></a>                 </div>                 <div class="collapse navbar-collapse pull-right header-text" id="mynavbar">                   <ul class="nav navbar-nav">                     <li class="active"><a href="#">home</a></li>                     <li class="dropdown">                       <a class="dropdown-toggle" data-toggle="dropdown" href="#">services<span class="caret"></span></a>                       <ul class="dropdown-menu">                         <li><a href="#">marketing campaigns</a></li>                         <li><a href="#">donor activation</a></li>                         <li><a href="#">lobbying</a></li>                       </ul>                     </li>                     <li><a href="#">our team</a></li>                     <li><a href="#">contact us</a></li>                   </ul>                   <ul class="nav navbar-nav navbar-right">                     <li><a href="#"><span class="glyphicon glyphicon-user">     </span> sign up</a></li>                     <li><a href="#"><span class="glyphicon glyphicon-log-in">     </span> login</a></li>                   </ul>                 </div>               </div>         </nav>

your code seems working fine ,the in class generated on click bootstrap class , after toogling disapers .

what can put external resourse js files such jquery,bootstrap @ first , custom js file @ last ,may conflicting between these js file thats why toogle function not working

you can add js reference file maintaining sequence below

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> <link href="<?php echo get_bloginfo('template_directory'); ?>/javascipt/main.js">  <script src="<?php echo get_bloginfo('template_directory'); ?>/javascript/main.js">

Comments

Post a Comment

Popular posts from this blog

ios - MKAnnotationView layer is not of expected type: MKLayer -

-
Image
so code works fine logger riddled message. there way rid of or suppress it? postannotation.swift class postannotation: mkpointannotation { //mark: properties let post: post //mark: initialization init(post: post) { self.post = post super.init() self.coordinate = cllocationcoordinate2d(latitude: post.latitude, longitude: post.longitude) self.title = post.title self.subtitle = post.timestring() } } adding annotation let annotation = postannotation(post: post) self.map.addannotation(annotation) func mapview func mapview(_ mapview: mkmapview, viewfor annotation: mkannotation) -> mkannotationview? { if annotation mkuserlocation { return nil } var annotationview = mapview.dequeuereusableannotationview(withidentifier: "pin") as? mkpinannotationview if annotationview == nil { annotationview = mkpinannotationview(annotation: annotation, reuseidentifier: "pin")
Read more

ZeroMQ on Windows, with Qt Creator -

-
i have installed zmq link given below on windows 7. http://zeromq.org/distro:microsoft-windows 1) have c++ project in qt-creator , i'm using zmq c++ binding (zhelpers.hpp etc). 2) have added .lib installed zmq folder qtcreator 3) while compiling, compiler looks _imp__zmq_verion, in .dll files present in .lib have __imp_zmq_version. 4) causing undefined reference zmq_version. anyone else faced problem , has solution ?
Read more

unity3d - Unity SceneManager.LoadScene quits application -

-
i have 2 different scenes 1 named 'main' , other 'game' both added scenes in load. when use scenemanager.loadscene("game"); works no problem when tried return main scene code if (input.getkeydown (keycode.escape)) { scenemanager.loadscene("main"); } strangely game quits. thanks. sorry interruption. somewhere on other script found code. if (input.getkeydown (keycode.escape)) { application.quit (); } that's bad, know...
Read more