How to make bootstrap's navbar display horizontally

I am following the example to use the Navbar from http://getbootstrap.com/components/#navbar-default, however, I am having problem to make it display horizontally like in the example. The code below is the same from the page. What am I missing to make it to display horizontally?

<!DOCTYPE html>
<html>

<head>
  <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body id="bs-example-navbar-collapse-1">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
        <a class="navbar-brand" href="#">Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
          </li>
          <li><a href="#">Link</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><a href="#">Separated link</a>
              </li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</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><a href="#">Separated link</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</body>

</html>

Upvotes: 4

Answers (3)

avat

Reputation: 400

I am not 100% sure that "my" problem was exactly the same as the original posters, but it looks very similar and the same solution could apply.

In my case, the problem manifested when the navbar was used within an Angular application with the "developer tools" on the side. This was reducing the width of the page made available to bootstrap, below a certain threshold (see below), which in turn made the navbar items to show on a column instead of a row.

The outermost navbar definition, as of the documentation sample, looked like this:

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
        ...
    </div>
</nav>

After I checked the various element classes / styles in the browser, as well as the Bootstrap documentation, it seems that the following constraints apply:

The layout of the li elements is not directly controlled by the parent ul, but by the main nav element.
This one may bear a flex-direction: row style, and in this case the navbar items are shown horizontally, exactly as in the documentation samples. However, this style is conditioned by a minimum page width.
If the page is not wide enough, this style is not applied, the navbar is shown as collapsed and the "Toggle collapse" button is shown.
When expanding the navbar via the "Toggle collapse" button, the navbar items are always shown vertically, no matter how wide the page is.

Now the anomaly seems to be related to Bootstrap mistakenly deciding that the navbar items won't fit within a given page width, while common sense says they will. (In my case, it switched to collapsed navbar when the items would only need 40% of the available page width).

As stated by the documentation page, this is controlled (in the snippet above) via the navbar-expand-lg class, and more specifically the "lg" suffix. This explicitly refers to a specific display width. Changing this suffix (towards lower widths) triggers the presentation switch - from expanded to collapsed - in a way more appropriate for the actual navbar content. Concretely, in my case changing to navbar-expand-sm made the navbar behave as expected as the page gets wider or narrower.

At first view, this solution could affect the page portability across devices. However, I don't think this is the case because it is not about specifying an expected page with, but a minimum page width to accommodate the navbar - which does not depend on the device.

Upvotes: 3

Sushma B

Reputation: 39

Try using ul class="nav nav-pills navbar-right".

Upvotes: 3

Electrenator

Reputation: 1

From the way I had read your question, I get that you are trying to get it vertically instead of horizontally. It's at least an assumption from your code example that is already horizontal. :)

A nav list with the class flex-column should to the trick for the list itself. Found this over at the Bootstrap documentation itself under there available styles. An example of this list itself could look something like this:

<ul class="nav flex-column nav-link">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
    <form class="my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
</ul>

Most of the things bootstrap has for a navbar seem to work with this. This is at least with the things I have used until now.

Upvotes: 0

How to make bootstrap&#39;s navbar display horizontally

Answers (3)

Related Questions

How to make bootstrap's navbar display horizontally