CODEWITHSUNDEEP
htmltwitter-bootstrap
Langkiller
Langkiller

Reputation: 3457

Bootstrap navbar not showing items correctly

I am currently trying to learn Bootstrap, but i've run into a problem. The navbar is not show its items like it should when it is in the mobile view.

First her is my code:

<!DOCTYPE html>
        <html>
            <head>
                <title>Test Bootstrap!</title>
                <meta name='viewport' content='width=device-width, initial-scal=1.0'>
                <link href='css/bootstrap.min.css' rel='stylesheet'>
                <link href='css/styles.css' rel='stylesheet'>
            </head>

            <body>
               <div class='navbar navbar-inverse navbar-static-top' role='navigation'>
                    <div class='container'>

                        <a href= '#' class='navbar-brand'>BootstrapTest</a>

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


                        <div class='collapse navbar-collapse navHeaderCollapse'>
                            <ul class='nav navbar-nav navbar-right'>
                                <li class='active'><a href='#'>Home</a></li>
                                <li><a href='#'>Something</a></li>
                            </ul>
                        </div>

                    </div>
                </div>

                <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
                <script src='js/bootstrap.js'></script>
            </body>
        </html>

And here is how it looks when the toggle button is pressed: enter image description here

I really can't figure out what i'm doing wrong so I hope someone else could spot the problem.

Any help will be greatly appreciated

Upvotes: 0

Views: 1626

Answers (2)

Sam R Harkreader
Sam R Harkreader

Reputation: 11

In addition to adding the navbar-header, you'll need to move the navbar-collapse class outside of the navbar header class. Here's a working version. (FYI: I also moved the script link into the header.)

<!DOCTYPE html>
<html>
    <head>
        <title>Test Bootstrap!</title>
        <meta name='viewport' content='width=device-width, initial-scal=1.0'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>

    <body>
      <div class='navbar navbar-inverse navbar-static-top' role='navigation'>
          <div class='container'>
            <div class="navbar-header">
              <a href= '#' class='navbar-brand'>BootstrapTest</a>

              <button class='navbar-toggle' data-toggle='collapse' data-target='.navHeaderCollapse'>
                  <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 navbar-right'>
                    <li class='active'><a href='#'>Home</a></li>
                    <li><a href='#'>Something</a></li>
                </ul>
            </div>

          </div>
      </div>
</body>
</html>

Upvotes: 0

alamadrid
alamadrid

Reputation: 64

What you're missing is the navbar-header element:

<body>
  <div class='navbar navbar-inverse navbar-static-top' role='navigation'>
    <div class='container'>
      <div class="navbar-header">
        <a href= '#' class='navbar-brand'>BootstrapTest</a>
        <button class='navbar-toggle' data-toggle='collapse' data-target='.navHeaderCollapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </button>
      </div>
     ...

Bootstrap (just as everything new at the first time we try it) can be a little confusing. Try to take a moment to read through their website, and take a look especially at their examples section, you can always see how they do things, and take the code samples as first guidance.

That's going to allow you to familiarize not only with the framework, but also with some of the basic "best practices".

Upvotes: 3

Related Questions