My bootstrap model for dropdown and collapsing navbar on re sizing for mobile devices is not working.. I can't even find where is the problem :( Please help me :)

+1 praveenraj .s.r · August 30, 2015
<html>
  <head><title> try</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-3.3.5-dist\css\bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    </script>
  </head>

  <body>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">Praveen</a>
        </div>
        <!--menu items-->
        <div class="navbar-collapse" class="navbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">home</a></li>
            <li><a href="#">about</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"> photography <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Nature</a></li>
                <li><a href="#">Street photography</a></li>
                <li><a href="#">Mixed</a></li>
              </ul>
            </li>
            <li><a href="#">contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </body>
</html>

Post a Reply

Replies

Oldest  Newest  Rating
0 jones omedo · September 15, 2015
Please, help to get a link for free effective tutorial
0 rajeev man dongol · September 14, 2015
(y)
0 praveenraj .s.r · September 14, 2015
@rajeev man dongol 
Yeah got working Buddy. Thank you for your kind help! :)  
+1 rajeev man dongol · September 6, 2015
hello
there is wrong displacement of the js library in the code . the js library should always be placed before the bootstrap js file .
here is the code you're probably looking for :
<html>
<head><title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.5-dist\css\bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--</script>-->
</head>

<body>
<div class="container-fluid">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-collapse">
<span class="caret">
</span>
</button>
</div>
<div class="collapse navbar-collapse" id="navigation-collapse">
<div class="ccol-sm-7">
<ul class="nav nav-tabs nav-justified">
<li class="active">
<a href="">list</a>
</li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
+1 rajeev man dongol · September 6, 2015
hello
there is wrong displacement of the js library in the code . the js library should always be placed before the bootstrap js file . 
here is the code you're probably looking for :
<html>
<head><title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.5-dist\css\bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</script>
</head>

<body>
<div class="container-fluid">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-collapse">
<span class="caret">
</span>
</button>
</div>
<div class="collapse navbar-collapse" id="navigation-collapse">
<div class="ccol-sm-7">
<ul class="nav nav-tabs nav-justified">
<li class="active">
<a href="">list</a>
</li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</div> 
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
  • 1

HTML / CSS / Web Design

107,083 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators