Navbar doesn't collapse quite right

Question

I have a navbar that looks like this:

When I try and shrink the page to simulate a mobile device however, it doesn't collapse quite right:

It's supposed to collapse so that the button that is sort of hidden behind the "Register" text becomes the toggle for the menu. Here is my code:

<div class="sticky-header-navbar-container">
    <div class="well">
        <div class="navbar navbar-default navbar-fixed-top navbar-collapse navHeaderCollapse" id="navbar">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"><a href="index.html">Home</a></span>
                <span class="icon-bar"><a href="#" data-toggle="modal" data-target="#about-modal">About</a></span>
                <span class="icon-bar"><a href="#" data-toggle="modal" data-target="#contact-modal">Contact</a></span>
                <span class="icon-bar"><a href="playground.html" class="tooltip-bottom" data-tooltip="Only here while under development.">Playground</a></span>
                <span class="icon-bar"><a href="#" data-toggle="modal" data-target="#login-modal">Login</a></span>
                <span class="icon-bar"><a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
                                          data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a></span>
            </button>
            <ul class="nav navbar-nav">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="#" data-toggle="modal" data-target="#about-modal">About</a>
                </li>
                <li>
                    <a href="#" data-toggle="modal" data-target="#contact-modal">Contact</a>
                </li>
                <li>
                    <a href="playground.html" class="tooltip-bottom" data-tooltip="Only here while under development.">Playground</a>
                </li>
                <li>
                    <form class="navbar-form" role="search">
                        <div class="input-group" style="width: 100%">
                            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                            </div>
                        </div>
                    </form>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#" data-toggle="modal" data-target="#login-modal">Login</a>
                </li>
                <li style="padding-right: 20px">
                    <a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
                       data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="about-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">About This Page</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Contact Us!</h4>
            </div>
            <div class="modal-body">
                <p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
                <p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
                <div class="form-group">
                    <form role="form">
                        <div class="form-group">
                            <label for="contact-name" class="sr-only">Your Name</label>
                            <input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
                        </div>
                        <div class="form-group">
                            <label for="contact-email" class="sr-only">Your Email</label>
                            <input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
                        </div>
                        <div class="form-group">
                            <textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
                        </div>
                        <button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Login with Github!</h4>
            </div>
            <div class="modal-body">
                <form class="navbar-form">
                    <label for="login-inputEmail" class="sr-only">Email address</label>
                    <input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
                    <label for="inputPassword" class="sr-only">Password</label>
                    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                    <div class="separator" style="padding-bottom: 15px"></div>
                    <div class="checkbox" style="padding-right: 15px;padding-left: 10px">
                        <label>
                            <input type="checkbox" value="remember-me">
                            Remember Me
                        </label>
                    </div>
                    <button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">How To Register</h4>
            </div>
            <div class="modal-body">
                <p>In order to log in you need a Github account as we use that for log in here.</p>
                <p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
                <p>If you have yet to register <a href="https://github.com/join">Click Here!</a></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 1

If that's all the related code then you shouldn't need anything outside the default classes.

See Default Navbar Docs.

You shouldn't need these modal links in the header and then again within the navbars links, these are whats covering up the mobile toggle button.

And your HTML structure is off and/or missing some pieces. Again if you refer to the Docs you'll see the inconsistencies, you need to put your toggle button inside the navbar-header class, navbar-form does not belong inside of a li item etc.

See working example Snippet.

*Note that because you links that utilize a lot of space at around 875px you'll see your navbar overflow to a new line (a CSS media query turns the background red when this happens in my example). One solution is to reduce the length of the link title(s) to prevent this:

ie Want to Register? Click Here! to just Register!.

@media (max-width: 875px) {
  html,
  body {
    background: red;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav">
        <li> <a href="index.html">Home</a>

        </li>
        <li> <a href="#" data-toggle="modal" data-target="#about-modal">About</a>

        </li>
        <li> <a href="#" data-toggle="modal" data-target="#contact-modal">Contact</a>

        </li>
        <li> <a href="playground.html" class="tooltip-bottom" data-tooltip="Only here while under development.">Playground</a>

        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header"> <span class="input-group-btn">
                        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>

          </button>
          </span>
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#" data-toggle="modal" data-target="#login-modal">Login</a>

        </li>
        <li> <a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal" data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div id="about-modal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">About This Page</h4>

      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Contact Us!</h4>

      </div>
      <div class="modal-body">
        <p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
        <p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
        <div class="form-group">
          <form role="form">
            <div class="form-group">
              <label for="contact-name" class="sr-only">Your Name</label>
              <input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
            </div>
            <div class="form-group">
              <label for="contact-email" class="sr-only">Your Email</label>
              <input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
            </div>
            <div class="form-group">
              <textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
            </div>
            <button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span>

            </button>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Login with Github!</h4>

      </div>
      <div class="modal-body">
        <form class="navbar-form">
          <label for="login-inputEmail" class="sr-only">Email address</label>
          <input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
          <label for="inputPassword" class="sr-only">Password</label>
          <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
          <div class="separator" style="padding-bottom: 15px"></div>
          <div class="checkbox" style="padding-right: 15px;padding-left: 10px">
            <label>
              <input type="checkbox" value="remember-me">Remember Me</label>
          </div>
          <button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span>

          </button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">How To Register</h4>

      </div>
      <div class="modal-body">
        <p>In order to log in you need a Github account as we use that for log in here.</p>
        <p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
        <p>If you have yet to register <a href="https://github.com/join">Click Here!</a>

        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>