0

I've the following HTML NavBar:

 <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom" style="margin-bottom : 0px;">
            <div class="container-fluid" ng-controller = "NavController">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span> Menu <span ng-show="userCart.cart_size>0" style="color:orange">({{userCart.cart_size}}) </span><i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand" href="#page-top">XYZ IoT</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="hidden">
                            <a href="#/main#page-top"></a>
                        </li>
                        <li class="page-scroll">
                            <a href="#/main#portfolio">Products</a>
                        </li>
                        <li class="page-scroll">
                            <a href="#/main#about">About</a>
                        </li>
                        <li class="page-scroll">
                            <a href="#/main#contact">Contact</a>
                        </li>
                        <!-- Add the Login Anchor -->
                        <li ng-if="!userInfo.authorization">
                            <a href="#/login">Login</a>
                        </li>
                        <li ng-if="userInfo.authorization">
                            <a href="#/mydevices">My Devices</a>
                        </li>
                        <li ng-if="userInfo.authorization">
                            <a href="#/main" ng-click = "logout()">Logout</a>
                        </li>
                    </ul>
                </div>
                                                </div>                <!-- /.navbar-collapse -->
        </nav>

The problem is : When the compressed Nav appears, and I click on it, the menu items appear -- so far fine. But as soon I click else where, the menu stays as is. I have to click on the Menu (3 lines) to make menu items to disappear.

Can it be accomplished? I'm using bootstrap

Ouroboros
  • 1,432
  • 1
  • 19
  • 41
  • Possible duplicate of [Bootstrap 3 Mobile nav won collapse when you click outside it](https://stackoverflow.com/questions/22749588/bootstrap-3-mobile-nav-won-collapse-when-you-click-outside-it) – Akrion Jul 29 '18 at 17:57
  • Possible duplicate of [How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?](https://stackoverflow.com/questions/23764863/how-to-close-an-open-collapsed-navbar-when-clicking-outside-of-the-navbar-elemen) – DaFois Jul 29 '18 at 17:58
  • Please see the link above. Already solved. – Akrion Jul 29 '18 at 17:58

0 Answers0