Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap navbar not displaying correctly

I am trying to make a navbar like seen on: http://getbootstrap.com/examples/navbar/

I have the code below:

    <head>
  <meta charset='UTF-8' />
  <link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet' />
</head>
<body class='container'>
  <nav class="navbar navbar-inverse navbar-fixed-top" >
    <div class="navbar-header">
      <a class="navbar-brand" href="#">BLARG</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">TEST</a></li>
      </ul>
    </div>
  </nav>

  <title>Splatter</title>
  <div class="page-header">
    <h1><%= @title %></h1>
  </div>
  <%= yield %>

But I get something like this:
enter image description here

Any ideas what I am totally messing up

Tags:

3

Answers


  1. 0

    Usually when I see a Bootstrap component in the documentation, and I want to replicate it, I just do CTRL+U in Chrome (or whatever shortcut you have for source viewing in your browser) and copy the code and paste it in my favorite editor and then I have that component. In your case, the mark up would be:

    <div class="container">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

</div>

    Note that the nav element is wrapped in a container element, that’s what you don’t want to be doing really. I’d rather just leave nav as a direct child of body.

    JS Fiddle

    Login or Signup to reply.
  2. 0

    You were referencing Bootstrap v2 stylesheet in your head for v3 code and then had to clean the HTML markup.

    <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' />

<body>

  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">

        <a href="#" class="navbar-brand">Blarg</a>
      </div>

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

        <ul class="nav navbar-nav">
          <li><a href="#">Test</a>
          </li>

        </ul>

      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>


</body>
    Login or Signup to reply.
  3. 0

    using 

    <nav class="navbar bg-transparent ...">...</nav>

    works and then working with other css classes to fully adapt the look you want . Here is a cheat sheet to help you get started cheat sheet inside the cheat sheet is a list of css classes. The code above works fully for making the navbar work the way you want just add the css class 

    bg-transparent

    to any of the following elements to make them transparent. So adding the following works

    <nav class="navbar bg-transparent navbar-inverse navbar-fixed-top" >
    <div class="navbar-header">
      <a class="navbar-brand" href="#">BLARG</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">TEST</a></li>
      </ul>
    </div>
</nav>

    will make the navbar fully transparent 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search