0

I am trying to create a basic bootstrap navigation menu with a toggle button. When the screen size is reduced, the navigation links hide as they should but the toggle button does not display. Why is this happening? Can someone help me figure this out? Thanks!

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <title>Stack</title>
    <style type="text/css">
      #nav {
        background-color: yellow;
      }
    </style>
  </head>
  <body class="sidebar-collapse">
    <nav class="navbar navbar-expand-md navbar-primaryfixed-top" id="nav">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          Stackoverflow
        </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#test">
                asdd
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#servicesarea">
                dsdsas
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#aboutme">
                daasdsda
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#getintouchdiv">
                afdfdf
              </a>
            </li>
          </ul>
          &nbsp; &nbsp;
          <button class="btn navbar-btn ml-2 text-white btn-success">
            Sign in
          </button>
        </div>
      </div>
    </nav>
  </body>
</html>

External links will be appreciated too.

Fabian S.
  • 2,441
  • 2
  • 24
  • 34
Aman WD
  • 71
  • 1
  • 3
  • Please try with latest bootstrap version 4.1.1. documentation here - https://getbootstrap.com/docs/4.1/components/navbar/ and Example here - https://getbootstrap.com/docs/4.1/examples/navbars/ Hope, this help you. Thanks. – HDP Jun 15 '18 at 08:52
  • So it is just the problem of the load order? – Aman WD Jun 17 '18 at 04:45

1 Answers1

-1

Please use this code for simple bootstrap navbar 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

</body>
</html>
Manmohan Sharma
  • 116
  • 3
  • you have provided example with old bootstrap version. his asked for bootstrap 4. – HDP Jun 15 '18 at 08:51