CODEWITHSUNDEEP
twitter-bootstrapnavbar
Zain
Zain

Reputation: 7

Collapsible bootstrap navbar

I have problem with my collapsible navbar. It shows collapsible button but not "li" when i click on button. Demo

Here is code

<!DOCTYPE html>
<html>
<head>
	<title>Navbar Collapse</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" href="jquery/jquery-1.12.2.min.js"></script>
	<script type="text/javascript" href="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="navbar navbar-inverse">
		<div class="container">
				<a href="#" class="navbar-brand">MyWebsite</a>
				<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>
			<div class="collapse navbar-collapse" id="mynavbar">
				<ul class="nav navbar-nav navbar-left" >
					<li><a href="">Home</a></li>
					<li><a href="">about</a></li>
					<li><a href="">contact</a></li>
					<li><a href="">search</a></li>
				</ul>
			</div>
		</div>	
	</div>
</body>
</html>

Upvotes: 0

Views: 11939

Answers (3)

TheNickelDime
TheNickelDime

Reputation: 11

Here's a responsive Bootstrap navbar that toggle-slides out from the left and tracks your scroll. It can be further customized with media queries for best results on landscape/smallest screens

http://codepen.io/TheNickelDime/pen/NppZdQ

in action: http://cathairapocalypse.com

<!-- NAVBAR -->

<div id="ca_sidenav" class="container-fluid clearfix scrollspy">

    <ul id="ca_nav" class="nav" data-spy="affix">

       <li><a id="ca_nav0" class="CA_navButton active" href="#ca_section0" onclick="navButtonClick(0);"><div class="CA_navHighlight"></div><span><B2>Section0</B2></span></a></li>
       <li><a id="ca_nav1" class="CA_navButton" href="#ca_section1" onclick="navButtonClick(1);"><div class="CA_navHighlight"></div><span><B2>Section1</B2></span></a></li>
       <li><a id="ca_nav2" class="CA_navButton" href="#ca_section2" onclick="navButtonClick(2);"><div class="CA_navHighlight"></div><span><B2>Section2</B2></span></a></li>
       <li><a id="ca_nav3" class="CA_navButton" href="#ca_section3" onclick="navButtonClick(3);"><div class="CA_navHighlight"></div><span><B2>Section3</B2></span></a></li>
       <li><a id="ca_nav4" class="CA_navButton" href="#ca_section4" onclick="navButtonClick(4);"><div class="CA_navHighlight"></div><span><B2>Section4</B2></span></a></li>
       <li><a id="ca_nav5" class="CA_navButton" href="#ca_section5" onclick="navButtonClick(5);"><div class="CA_navHighlight"></div><span><B2>Section5</B2></span></a></li>

    </ul>

</div>

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

You code is all fine. I took the same code in the question and got it working. The only change is I pointed the references to be read from cloud. So I am sure The only problem might be the files you are referencing for including bootstrap.min.js and your jquery. Check your console window to see if there was any error loading these files.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="navbar navbar-inverse">
  <div class="container">
    <a href="#" class="navbar-brand">MyWebsite</a>
    <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>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="">Home</a>
        </li>
        <li><a href="">about</a>
        </li>
        <li><a href="">contact</a>
        </li>
        <li><a href="">search</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

jajaperson
jajaperson

Reputation: 21

You missed out <div class="navbar-header"> plus navbar-brand usually goes after toggle navigation. If that doesn't help I have know idea.

<!DOCTYPE html>
<html>
<head>
	<title>Navbar Collapse</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" href="jquery/jquery-1.12.2.min.js"></script>
	<script type="text/javascript" href="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="navbar navbar-inverse">
		<div class="container">
            <div class="navbar-header">
				<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 href="#" class="navbar-brand">MyWebsite</a>
            </div>
			<div class="collapse navbar-collapse" id="mynavbar">
				<ul class="nav navbar-nav navbar-left" >
					<li><a href="">Home</a></li>
					<li><a href="">about</a></li>
					<li><a href="">contact</a></li>
					<li><a href="">search</a></li>
				</ul>
			</div>
		</div>	
	</div>
</body>
</html>

Upvotes: 0

Related Questions