CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexboxbootstrap-4
Chandrahas Balleda
Chandrahas Balleda

Reputation: 2822

Bizzare placement of list items on navbar - BOOTSTRAP 4

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

enter image description here

What I actually want is the below :

enter image description here

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.

Upvotes: 0

Views: 87

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362420

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

Upvotes: 1

Johannes
Johannes

Reputation: 67768

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>

Upvotes: 1

A.Broderick
A.Broderick

Reputation: 201

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.

Upvotes: 1

Related Questions