0

I simply need my Bootstrap 4 navbar to not be responsive with toggler.

See here: https://jsbin.com/kayagez/edit?html,output

I have this in big screen:

bs4navbarbigscreen

I just need it to stay like it is also in mobile view. But instead I have this:

navbarbs4responsivemobile

What I need is navbar to the right of the Navbar brand also in mobile. And the overflow: hidden for what I can't see to the right is ok for me.

How to?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Bug Report</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>

    <div class="home" style="padding-top:100px">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>

        <ul class="navbar-nav ml-auto" style="flex-direction: row;">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
        </ul>
      </nav>
    </div>

    <!-- jQuery and Bootstrap JavaScript-->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  </body>
</html>

1 Answers1

0

Change the .navbar flex-wrap: wrap; property to nowrap.

.navbar {
    flex-wrap: nowrap;
}
azeós
  • 4,853
  • 4
  • 21
  • 40