Bizzare placement of list items on navbar - BOOTSTRAP 4

Question

I am trying to use BOOTSTRAP 4 navbar and I am seeing the below output on the webpage.

What I actually want is the below :

I am using the following code :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>

  <nav class="navbar navbar-dark bg-dark">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">
          <h5 class="text-white">
            <i class="fab fa-expeditedssl"></i> &nbsp CVT</h4>
        </a>
      </li>
    </ul>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">HOME
                        <i class="fas fa-home"></i>
                        <span class="sr-only">(current)</span>
                    </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="\search">SEARCH
                        <i class="fas fa-search"></i>
                    </a>
      </li>
    </ul>


    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

  </nav>
</div>

I've tried to inline the list items using class list-inline but nothing is working. Can you please help.? Thank you.

score 1 · Answer 1 · answered Sep 25 '18 at 16:43

1

In your <nav> tag there should be a navbar-expandattribute, such as navbar-expand-md. From the docs:

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

answered Sep 25 '18 at 16:43

A.Broderick

181
5

I tried that, but navbar toggler is getting disappeared. – METALHEAD Sep 25 '18 at 16:44
Yes, the navbar toggler should only appear when you view width is below a certain size. The navbar will collapse and the toggler will take the place of the links, providing a dropdown. I have tested your code and it does not seem to be toggling the links however. Copy the example navbar from the bootstrap documentation and edit as you see fit. This is the best way to see how the navbar correctly functions. See https://getbootstrap.com/docs/4.1/components/navbar/#nav – A.Broderick Sep 25 '18 at 16:55

score 1 · Answer 2 · answered Sep 25 '18 at 16:50

The flex-direction of those ul elements is column, so set that to row for the second ul to have its items appear next to each other:

ul.ml-auto {
  flex-direction: row;
}

ul.ml-auto li {
  margin-left: 30px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>

  <nav class="navbar navbar-dark bg-dark">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">
          <h5 class="text-white">
            <i class="fab fa-expeditedssl"></i> &nbsp CVT</h4>
        </a>
      </li>
    </ul>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">HOME
                        <i class="fas fa-home"></i>
                        <span class="sr-only">(current)</span>
                    </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="\search">SEARCH
                        <i class="fas fa-search"></i>
                    </a>
      </li>
    </ul>


    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

  </nav>
</div>

score 1 · Accepted Answer · answered Sep 25 '18 at 16:53

There are a few issues because the Navbar isn't structured like a typical Bootstrap 4 Navbar...

Use flex-row to force the navbar-nav to remain horizontal at all widths

<div class="pos-f-t">
    <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark p-4">
            <h4 class="text-white">Collapsed content</h4>
            <span class="text-muted">Toggleable via the navbar brand.</span>
        </div>
    </div>
    <nav class="navbar navbar-dark bg-dark">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="\">
                    <h5 class="text-white">
            <i class="fab fa-expeditedssl"></i> &nbsp; CVT</h5>
                </a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto flex-row">
            <li class="nav-item active">
                <a class="nav-link px-2" href="\">HOME
                        <i class="fas fa-home"></i>
                        <span class="sr-only">(current)</span>
                    </a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-2" href="\search">SEARCH
                        <i class="fas fa-search"></i>
                    </a>
            </li>
        </ul>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>

https://www.codeply.com/go/zED6d4TC8B

Fantastic...Thank you Zim. – METALHEAD Sep 25 '18 at 17:09 — METALHEAD, Sep 25 '18 at 17:09

Bizzare placement of list items on navbar - BOOTSTRAP 4

3 Answers3