We help IT Professionals succeed at work.

[Bootstrap] Navigation Bar Collapse

eugene007
eugene007 asked
on
1,171 Views
Last Modified: 2017-04-22
The code below is a responsive top navigation bar and upon clicking on the menu link it collapse. However there is a problem whereby when I click on "Maintenance" it collapses. By right it is suppose to collapse when I select options below the "Maintenance".

header.php

		<div class="navbar navbar-default navbar-fixed-top" role="navigation">
		   <div class="container">
			 <div class="navbar-header">
			  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 	
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a class="navbar-brand">logo</a>
			 </div>
			 <div class="navbar-collapse collapse">
			 <ul class="nav navbar-nav navbar-right">
			  <li><a href="#!/Employee">Employee</a></li>
			  <li><a href="#!/User">User</a></li>
			  <li class="dropdown">
				  <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">Maintenance<b class="caret"></b></a>
				  <ul class="dropdown-menu">
					<li class="dropdown-header">Admin & Dashboard</li>
					<li><a href="#!/Employee">Employee</a></li>
					<li><a href="#!/User">User</a></li>
					<li class="divider"></li>
					<li class="dropdown-header">Portfolio</li>
					<li><a href="#!/Employee"></a></li>
					<li><a href="#!/Employee"></a></li>
				  </ul>
			   </li>
			   <li><a href="#!/Employee">Contact</a></li>
			 </ul>
			 </div>
			</div>
        </div>
		<br/><br/><br/><br/>

Open in new window


EmployeeController.js

    $('.nav a').on('click', function(){
		$(".navbar-collapse").collapse('hide');
    }); 

Open in new window


Apart from that, Are there ways to prevent this menu from overlapping on my contents.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
I have put your code into this online sample

http://www.marcorpsa.com/ee/t2320.html

Not seeing the problem - can you describe relative to the above sample?

Author

Commented:
In a responsive view (mobile) for the nav bar, when I click on "Maintenance" it doesn't show me the option below it. Rather the nav bar closes. However in full screen (laptop) it works.
menu_02.jpg

Author

Commented:
Could it be due to my libraries (position or missing library). I am using AngularJS single page app template and here is the main page code with all the libraries:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">  
    <head>
        <meta charset="UTF8">
        <title>MyStore</title>
		<link href="assets/css/main.css" rel="stylesheet" type="text/css">
		<link href="assets/css/sweetalert.min.css" rel="stylesheet" type="text/css">
		<link href="assets/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Add the usual things here -->
    </head>
    <body>
	
		<?php include 'assets/templates/theme/header.php';?>
	
	    <div id="maincontent">
            <div id="view" ui-view></div>
        </div>
		
		<?php include 'assets/templates/theme/footer.php';?>

        <script src="assets/vendor/angular/angular.min.js"></script>
        <!--<script src="assets/vendor/angular-route/angular-route.min.js"></script> -->
		<script src="assets/vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script src="assets/vendor/angular-bootstrap/ui-bootstrap.min.js"></script>
		 <script src="assets/vendor/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
		<script src="assets/vendor/satellizer/dist/satellizer.js"></script>
		<script src="assets/vendor/ngSweetAlert/SweetAlert.min.js"></script>
		<script src="assets/vendor/sweetalert/dist/sweetalert.min.js"></script>
		<script src="assets/js/myApp.js"></script>
		
		<script src="assets/js/controllers/main/EmployeeController.js"></script>
		<script src="assets/js/controllers/main/AuthenticationController.js"></script>
		<script src="assets/js/controllers/main/UserController.js"></script>
		
		<script src="assets/js/controllers/modal/employee/AddEmployeeController.js"></script>
		<script src="assets/js/controllers/modal/employee/ViewEmployeeController.js"></script>
		<script src="assets/js/controllers/modal/employee/UpdateEmployeeController.js"></script>
		
		<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
        <script src="assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    </body>
</html>  

Open in new window

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Does it work correctly in my sample?

Author

Commented:
Your sample works. I'll do a code comparison and revert back.

Author

Commented:
Still can't. Perhaps i'll host the code and you could see the result. Otherwise i'll push the code to Github if I can't find a temporary hosting.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You should consider using Angular directives for Bootstrap - (https://angular-ui.github.io/bootstrap/) and look at the collapse directive.

You can use a stat var to trigger the collapse.

And these references discuss this in more detail
https://github.com/angular-ui/bootstrap/issues/394#issuecomment-69488620
http://stackoverflow.com/questions/14741988/twitter-bootstrap-navbar-with-angularjs-collapse-not-functioning
From the above link
<div class="navbar navbar-inverse" ng-controller="NavBarCtrl">
<div class="navbar-inner">
    <div class="container">
        <button class="btn btn-navbar" ng-click="isCollapsed = !isCollapsed"> 
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
        </button> <a class="brand" href="#">Short Course</a>
        <div class="nav-collapse" uib-collapse="isCollapsed">
            <ul class="nav">
                <li><a href="#"><i class="icon-home icon-white"></i> Home</a>
                </li>
                <li><a href="#">Lessons</a>
                </li>
                <li><a href="#">Grades</a>
                </li>
            </ul>
            <ul class="nav pull-right">
                <li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a>
                </li>
                <li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
</div>
<!-- /navbar-inner -->
</div>

Open in new window

var myApp = angular.module('myApp', ['ui.bootstrap']);

function NavBarCtrl($scope) {
    $scope.isCollapsed = true;
}

Open in new window

Here is a fiddle for the above (not mine) http://jsfiddle.net/KY5Mf/

Author

Commented:
I solved the problem.

I replaced the following line of code

<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">Maintenance<b class="caret"></b></a>

Open in new window


to the following line of code

 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Maintenance<b class="caret"></b></a>

Open in new window


As for the Java script I replaced the following line of code

    $('.nav a').on('click', function(){
		$(".navbar-collapse").collapse('hide');
    }); 

Open in new window


to the following line of code

	$(".navbar-nav li a").click(function(e) {
		if( $(e.target).is('a') && ( $(e.target).attr('class') != 'dropdown-toggle' ) ) {
			$(".navbar-collapse").collapse('hide');
		}
	});
	
	$('.navbar-collapse .dropdown-menu').click(function(){
		$(".navbar-collapse").collapse('hide');
	});

Open in new window


Therefore after clicking on the menu and submenu link the menu hides. Perhaps there is a better solution.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
I implemented your suggestion

	 <header>  
	   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		   <div class="container-fluid">
			 <div class="navbar-header">
			  <button type="button" class="navbar-toggle" data-ng-init="isCollapsed = true" data-ng-click="isCollapsed = !isCollapsed"> 	
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a class="navbar-brand">logo</a>
			 </div>
			 <div class="navbar-collapse collapse" data-ng-class="{collapse: isCollapsed}">
				 <ul class="nav navbar-nav navbar-right">
					  <li ng-click="isCollapsed=!isCollapsed"><a href="#!/Employee">Employee</a></li>
					  <li ng-click="isCollapsed=!isCollapsed"><a href="#!/User">User</a></li>
					  <li class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
						  <a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Maintenance <span class="caret"></span></a>
						  <ul class="dropdown-menu" role="menu">
							<li class="dropdown-header">Admin & Dashboard</li>
							<li ng-click="isCollapsed=!isCollapsed"><a href="#!/Employee">Employee</a></li>
							<li ng-click="isCollapsed=!isCollapsed"><a href="#!/User">User</a></li>
							<li class="divider"></li>
							<li class="dropdown-header">Portfolio</li>
							<li ng-click="isCollapsed=!isCollapsed"><a href="#!/Employee"></a></li>
							<li ng-click="isCollapsed=!isCollapsed"><a href="#!/Employee"></a></li>
						  </ul>
					   </li>
					   <li ng-click="isCollapsed=!isCollapsed"><a href="#!/Employee">Contact</a></li>
				 </ul>
			 </div>
			</div>
        </nav>
	 </header>
	<br/><br/><br/><br/>

Open in new window

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Did it work?

Author

Commented:
Yes it did :)

Author

Commented:
However I need to make it responsive.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Just put your code into this sample http://www.marcorpsa.com/ee/t2328.html

Seems responsive - what am I missing?

Author

Commented:
In mobile view it is responsive. However when I expand the menu in a mobile view then I cannot scroll the menu to see and make selection on available options. I was reading some comments given by google search that this could be due to the <body> being shorter than then the menu.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Try adding this style to your page

html, body {
   min-height: 100%;
}

Open in new window

If that does not work try with plain height
html, body {
   height: 100%;
}

Open in new window

Author

Commented:
I tried that but it doesn't work.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Do you have a link

Otherwise force body to a min-height of a value that you know is large enough to contain the menu.

Interested to know though - why is the content on the page not sufficient to push the body down enough for the menu?

Author

Commented:
To provide a link for access:

First option through teamviewer
Second option is to point a DNS to my localhost (laptop) [NOT SECURE]
Third option is to upload the codes to github
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Can you not do a minimal mockup and put it in a Fiddle or Plunkr?

Author

Commented:
Ok. That's new and i'll try now.

Author

Commented:
The code doesn't run well on both Fiddle or Plunkr. I even copied, paste and tested the code from your source (http://www.marcorpsa.com/ee/t2328.html) and it doesn't work.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Ok, can't really help unless I can replicate.
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
As answered.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
That makes sense. Difficult to call it without seeing it though, the sample I posted above had the fixed-top and still seemed to work

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.