CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Dan A.
Dan A.

Reputation: 37

Fix bootstrap dropdown menu's behavior

Please see the html code for the menu at:

https://www.findtaxpro.com/content/img/menufix-ehsan-1.html

There is a problem with the menu, and I don't know how to fix it. When the viewport is small, the mobile menu (hamburger menu) together with the user-icon shows as desired on the upper right hand corner.

However, when the mobile/hamburger menu is clicked immediately followed by the user-icon image, the mobile menu is not closed, and remains open. This lead to a poor user experience. Is there a way to close the mobile/hamburger menu when the user-icon image is clicked immediately after the mobile menu?

Thanks in advance for your time.

Dan

Upvotes: 0

Views: 1461

Answers (1)

ihpar
ihpar

Reputation: 676

Here I made a fiddle for you. Please check if it works the way you wanted to.

(function($) {

  $(".navbar-brand.user-img").on("click", function() {
    if ($("#defaultNavbar1").attr("aria-expanded") === "true") { // if hamburger menu already expanded
      $("button.navbar-toggle").click(); // click hamburger to collapse back
    }
  });

})(jQuery);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://www.findtaxpro.com/content/css/custom.css" rel="stylesheet">

<nav class="navbar navbar-default MainMenuBar">
  <a href="#" class="navbar-brand user-img" data-toggle="dropdown"> <img src="https://www.findtaxpro.com/Content/img/User.png" class="user-img" /></a>
  <ul class="dropdown-menu pull-right" role="menu">
    <li><a id="registerLink" href="https://www.findtaxpro.com/Account/Register"><span class="MenuItems">Register</span></a> </li>
    <li><a href="https://www.findtaxpro.com/Account/Login"><span class="MenuItems">Login</span></a> </li>
  </ul>
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <a class="navbar-brand" href="https://www.findtaxpro.com"><img class="navbar-brand user-img1" src="https://www.findtaxpro.com/Content/img/logo.png" /></a>
    <a class="navbar-brand" href="https://www.findtaxpro.com/Marketing/index"><img class="navbar-brand user-img4" src="https://www.findtaxpro.com/Content/img/ClickHereArtboard 1-8.png" /></a>


    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
  </div>


  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="defaultNavbar1">
    <ul class="nav navbar-nav pull-right">
      <li><a href="https://www.findtaxpro.com/Search"><span class="MenuItems">Search</span></a></li>
      <li><a href="https://www.findtaxpro.com/Reviews"><span class="MenuItems">Review</span></a></li>
      <li><a href="https://www.findtaxpro.com/Search/Promo"><span class="MenuItems">Offers</span></a></li>
      <li><a href="https://www.findtaxpro.com/Search/Rewards"><span class="MenuItems">Rewards</span></a></li>
      <li><a href="https://www.findtaxpro.com/Marketing/MileTrack"><span class="MenuItems">MileTrack</span></a></li>
      <li><a href="https://www.findtaxpro.com/Marketing/ReceiptsandDocs"><span class="MenuItems">Docs</span></a></li>
    </ul>
  </div>
</nav>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions