Sub menus in top navigation build using bootstrap does not collapse

Question

0.00/5 (No votes)

See more:

Hi Guys,

I have created a top navigation with a Navbar Header, 4 main links one with a drop down submenu and the caret.
The drop down submenu is not collapsing. I have tried to find the issue but couldn't find it. Please refer the below code snippet.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap with HTML</title>

    <!-- Bootstrap -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	
  </head>
  <body>
 	  
	<!-- Navbar with Dropdown Menus -->
	<!-- Start Navbar Top -->
	<nav class="navbar navbar-default">
		<div class="container">
			<!-- Toggle buttons snippet -  This will define the toggle buttons of the navigation when the screen gets smaller -->
			<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>
			<!-- End of Toggle button snippet -->
			
			<!-- The Site Name or Brand name snippet -->
			<a class="navbar-brand" href="www.youtube.com" target="_blank">The Bootstrap Site with HTML</a>
			<!-- End of brand name snippet -->
			
			<!-- The below defines the navigation links in the Navbar. From this point you can create the links for the navigation -->
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li ><a href="#">Home</a></li>
					<li ><a href="#">Technologies</a></li>
					<li ><a href="#">Partners</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="drop-down">Products </a>
						<ul class="dropdown-menu">
						<li><a href="#">SaaS</a></li>
						<li><a href="#">PaaS</a></li>
						<li><a href="#">Cloud</a></li>
						<li><a href="#">IofT</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<!--End of the navigation links in the Navbar -->
			
		</div>
	</nav>
	<!-- End of Navbar Top -->
	
	
  </body>
</html>

What I have tried:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap with HTML</title>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>





</head>
<body>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

</button>

</body>
</html>

Posted 17-Aug-16 21:41pm

Chiranthaka Sampath

Updated 23-Aug-16 1:28am

v3

Add a Solution

2 solutions

Solution 3

HTML

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap with HTML</title>

     <!-- Bootstrap -->
	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     
	 <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<!-- Font Awesome inclusion for the icons on the pages -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text\css" />
	

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	<link href="custom/custom.css" rel="stylesheet" type="text\css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	
	<!-- Adding a web font -->
	<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css />-->
	
  </head>
  <body>
  
	<!-- Navbar with Dropdown Menus -->
	<!-- Start Navbar Top -->
	<nav class="navbar navbar-default">
    <div class="container">
      <!-- Toggle buttons snippet -  This will define the toggle buttons of the navigation when the screen gets smaller -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        Toggle navigation
        
        
        
      </button>
      <!-- End of Toggle button snippet -->

      <!-- The Site Name or Brand name snippet -->
      <a class="navbar-brand" href="www.youtube.com" target="_blank">The Bootstrap Site with HTML</a>
      <!-- End of brand name snippet -->

      <!-- The below defines the navigation links in the Navbar. From this point you can create the links for the navigation -->
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">Technologies</a> 
          </li>
          <li><a href="#">Partners</a>
          </li>
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Products <ul class="dropdown-menu">
              <li><a href="#">SaaS</a>
              </li>
              <li><a href="#">PaaS</a>
              </li>
              <li><a href="#">Cloud</a>
              </li>
              <li><a href="#">IofT</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!--End of the navigation links in the Navbar -->

    </div>
  </nav>
	<!-- End of Navbar Top -->
	<!--- -->
	
	<!--- -->
	<!-- Bootstrap Page Header -->
	<div class="page-header">
		<h3>This is a page header</h3>
	</div>
	<!-- End of Bootstrap Page Header -->
	<!--- -->
	
	<!--- -->
	<!-- Bootstrap Jumbotron example -->
		<div class="container">
			<div class="jumbotron text-center">
		 	<h1>This is a Jumbotron in Bootstrap! </h1>
			<p>
				<button type="button" class="btn btn-primary">Primary</button>
				<button type="button" class="btn btn-success">Success</button>
			</p>
			</div>
	</div>
		<!-- End of Jumbotron -->
	<!--- -->
	
	<!--- -->
	<!-- Bootstrap button example -->
		<div class="container">
			<h4>Bootstrap Buttons</h4>
			
				<!-- The Large size buttons -->
				<p>
						<button type="button" class="btn btn-default btn-lg">Default</button>
						<button type="button" class="btn btn-primary btn-lg">Primary</button>
						<button type="button" class="btn btn-success btn-lg">Success</button>
						<button type="button" class="btn btn-info btn-lg">Info</button>
						<button type="button" class="btn btn-warning btn-lg">Warning</button>
						<button type="button" class="btn btn-danger btn-lg">Danger</button>
						<button type="button" class="btn btn-link btn-lg">Link</button>
				</p>
				
				<!-- The default size buttons -->
				<p>
						<button type="button" class="btn btn-default">Default</button>
						<button type="button" class="btn btn-primary">Primary</button>
						<button type="button" class="btn btn-success">Success</button>
						<button type="button" class="btn btn-info">Info</button>
						<button type="button" class="btn btn-warning">Warning</button>
						<button type="button" class="btn btn-danger">Danger</button>
						<button type="button" class="btn btn-link">Link</button>
				</p>
				
				<!-- The small size buttons -->
				<p>
						<button type="button" class="btn btn-default btn-sm">Default</button>
						<button type="button" class="btn btn-primary btn-sm">Primary</button>
						<button type="button" class="btn btn-success btn-sm">Success</button>
						<button type="button" class="btn btn-info btn-sm">Info</button>
						<button type="button" class="btn btn-warning btn-sm">Warning</button>
						<button type="button" class="btn btn-danger btn-sm">Danger</button>
						<button type="button" class="btn btn-link btn-sm">Link</button>
				</p>
				
				<!-- The small size buttons -->
				<p>
						<button type="button" class="btn btn-default btn-xs">Default</button>
						<button type="button" class="btn btn-primary btn-xs">Primary</button>
						<button type="button" class="btn btn-success btn-xs">Success</button>
						<button type="button" class="btn btn-info btn-xs">Info</button>
						<button type="button" class="btn btn-warning btn-xs">Warning</button>
						<button type="button" class="btn btn-danger btn-xs">Danger</button>
						<button type="button" class="btn btn-link btn-xs">Link</button>
				</p>
				
				
				
		</div>
	<!-- End of Bootstrap button example -->	
	<!--- -->
  
	<!--- -->
	<!-- Bootstrap container & container-fluid -->
	<!-- Bootstrap container example -->
	<div class="container bootcontainer">
    <h1>Hello, world! - Using Container</h1>
	</div>
	
	<!-- Bootstrap container-fluid example -->
	<div class="container-fluid bootcontainerfluid">
	<h1>Hello, world! - Using Container Fluid</h1>
	</div>
	<!-- End of  Bootstrap container and container-fluid-->
	<!--- -->
			<br />
	<!--- -->
	<!-- Bootstrap columns and rows -->
	<!-- Bootstrap columns example -->
	<div class="container">
	<div class="row">
	<div class="col-sm-4">
	<a href="#" class="thumbnail">
		<img src="images/CSharp_Logo.png" alt="CSharp Logo" />
	</a>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
	laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	<div class="col-sm-4">
	<a href="#" class="thumbnail">
		<img src="images/HTML5_Logo.png" alt="HTML5 Logo" />
	</a>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
	laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	<div class="col-sm-4">
	<a href="#" class="thumbnail">
		<img src="images/Python_Logo.png" alt="Python Logo" />
	</a>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
	laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	</div>
	</div>
	<!-- End of Bootstrap columns & rows -->
	<!--- -->
	
	<!--- -->
	<!-- Bootstrap Responsive Thumbnail & Image -->
	<!-- Bootstrap Thumbnail & image example -->
	<a href="#" class="thumbnail">
		<img src="images/CSharp_Logo.png" alt="CSharp Logo" />
	</a>
	<!-- End of Bootstrap Thumbnail & Image -->
	<!--- -->

	<!--- -->
	<!-- Bootstrap Footer -->
	<!-- Bootstrap Footer example -->
	<div class="navbar navbar-inverse navbar-bottom">
	<div class="container">
	<!-- Copyright section -->
	<div class="navbar-text pull-left">
	<p>Copyright ScriptDojo® 2016</p>
	</div>
	<!-- End of copyright section -->
	
	<!-- Facebook icon section -->
	<div class="navbar-text pull-right">
	<p>
		<a href="#">^__i class="fa fa-facebook fa-2x" aria-hidden="true"__^</a> 
		<a href="#">^__i class="fa fa-twitter fa-2x" aria-hidden="true"__^</a> 
		<a href="#">^__i class="fa fa-google-plus" aria-hidden="true"></a> 
		<a href="#">^__i class="fa fa-linkedin fa-2x" aria-hidden="true"></a> 
		<a href="#">^__i class="fa fa-pinterest-p fa-2x" aria-hidden="true"></a> 
	</p>
	</div>
	<!-- End of Facebook section -->
	
	</div>
	</div>
	<!-- End of Bootstrap Footer -->
	
	<!--- -->
  </body>
</html></link>

Posted 23-Aug-16 1:28am

Chiranthaka Sampath

Comments

Richard Deeming 23-Aug-16 8:38am

If you want to update your existing solution, click the green "Improve solution" link at the bottom-right corner of the solution.

DO NOT post your update as a new solution.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chiranthaka Sampath · Accepted Answer · 2016-08-18T18:27:00

I got the solution here it is. I have used the post on Stackoverflow

HTML

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap with HTML</title>

     <!-- Bootstrap -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	<link href="custom/custom.css" rel="stylesheet" type="text\css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	
	<!-- Adding a web font -->
	<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css />-->
	
  </head>
  <body>
  
	<!-- Navbar with Dropdown Menus -->
	<!-- Start Navbar Top -->
	<nav class="navbar navbar-default">
    <div class="container">
      <!-- Toggle buttons snippet -  This will define the toggle buttons of the navigation when the screen gets smaller -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        Toggle navigation
        
        
        
      </button>
      <!-- End of Toggle button snippet -->

      <!-- The Site Name or Brand name snippet -->
      <a class="navbar-brand" href="www.youtube.com" target="_blank">The Bootstrap Site with HTML</a>
      <!-- End of brand name snippet -->

      <!-- The below defines the navigation links in the Navbar. From this point you can create the links for the navigation -->
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">Technologies</a>
          </li>
          <li><a href="#">Partners</a>
          </li>
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Products </a>
            <ul class="dropdown-menu">
              <li><a href="#">SaaS</a>
              </li>
              <li><a href="#">PaaS</a>
              </li>
              <li><a href="#">Cloud</a>
              </li>
              <li><a href="#">IofT</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!--End of the navigation links in the Navbar -->

    </div>
  </nav>
	<!-- End of Navbar Top -->
  
	<!--- -->
	<!-- Bootstrap container & container-fluid -->
	<!-- Bootstrap container example -->
	<div class="container bootcontainer">
    <h1>Hello, world! - Using Container</h1>
	</div>
	
	<!-- Bootstrap container-fluid example -->
	<div class="container-fluid bootcontainerfluid">
	<h1>Hello, world! - Using Container Fluid</h1>
	</div>
	<!-- End of  Bootstrap container and container-fluid-->
	<!--- -->
	
	<!--- -->
	<!-- Bootstrap columns and rows -->
	<!-- Bootstrap columns example -->
	<div class="container">
	<div class="row">
	<div class="col-md-3">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
	laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	<div class="col-md-6">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
	laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	<div class="col-md-3">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
	laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	</div>
	</div>
	<!-- End of Bootstrap columns & rows -->
	<!--- -->

  </body>
</html></link>