0

How can I make my navbar not collapse/toggle when the window is resized? I tried adding 

.collapse{
   display: inline-block;
 }

to my css. With this, when the window is resized, the nav bar elements end up stacking. I'm also using bootstrap 4 alpha 6

here's my code for the navbar: http://www.bootply.com/mHeWTUSxAM

asdfasdfsdfga
  • 95
  • 13

2 Answers2

1
how i did it is by giving .btn.btn-navbar{display:none;}
and by giving .nav-collapse{height:auto}
it worked like this but i believe it is not best solution 
referenced to bootstrap 4 documentation you should look into that "Responsive behaviors

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-toggleable-* classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements."

Fadi Abo Msalam
  • 6,739
  • 2
  • 20
  • 25
1

updated Bootply

Just use navbar-toggleable-xl in place of navbar-toggleable-md.

Working snippet

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-xl navbar-inverse bg-inverse">

  <div class="navbar-collapse collapse" id="collapsingNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#menu-toggle" class="nav-link" id="menu-toggle">Menu</a>
      </li>
    </ul>
    <ul class="navbar-nav dropdown dropdown-menu-right ml-auto">
      <li class="nav-item ">
        <a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">logged in as</a>

        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Logout</a>
          <a class="dropdown-item" href="#">My Movements</a>
        </div>
      </li>
    </ul>
  </div>

</nav>
neophyte
  • 6,540
  • 2
  • 28
  • 43