Bootstrap navbar not displaying correctly

Question

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

It was in head. I just barely moved it while playing around

kinezu
– kinezu

2015-07-04 16:51:34 +00:00
Commented Jul 4, 2015 at 16:51 — kinezu
– kinezu, Commented Jul 4, 2015 at 16:51

m4n0 · Accepted Answer · 2015-07-04 17:16:15Z

4

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>

answered Jul 4, 2015 at 17:16

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Junior Hernandez · Accepted Answer · 2017-09-26 13:40:01Z

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 :)

edited Sep 26, 2017 at 13:40

answered Sep 26, 2017 at 13:01

Junior Hernandez

214 bronze badges

1 Comment

liam Over a year ago

Please do not just post links as the answer might become invalid if the link becomes corrupt

halfer · Accepted Answer · 2019-07-14 19:03:39Z

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

Collectives™ on Stack Overflow

Bootstrap navbar not displaying correctly

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related