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