Collapse navigation bar issue in bootstrap 3

Have a look at image

Went through some suggestion like adding navbar-right, but still getting it.

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">
    <title>Bootstrap Practice</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="navbar navbar-inverse navbar-static-top">



  <div class="container">

   <a href="#" class="navbar-brand">Tech Site</a>

  <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarHeaderCollapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>

   <div class="collapse navbar-collapse navbarHeaderCollapse">

        <ul class="nav navbar-nav navbar-right">

          <li><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Career</a></li>
          <li><a href="#">Social Media</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

   </div>
  </div>

  </div>


    <script src="jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Solution

I think you are using old bootstrap/Jquery versions. Check this plunk.

Ok I was able to reproduce the error in firefox.

you are missing the 'navbar-header' div. That should fix it.

    <div class="navbar-header">
    <a href="#" class="navbar-brand">Tech Site</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>