How to collapse navbar content for medium size screen using bootstrap 4

Question

I have created a navbar using bootstrap 4 alpha, and would like to hide the content of the navbar with a ☰ (hamburger menu) when the site / page is viewed on a medium size screen.

As of right now, both the ☰ (hamburger menu) and the navbar content are displaying when I load the page with a medium size browser window.

Ideally, I would like to hide the navbar list items when the page loads, and just display the hamburger menu, and then display the list items once the hamburger menu is clicked. If it is clicked again, I would like to hide the items.

The code in question looks like the following, _nav.html.erb

<nav class="navbar navbar-full navbar-light bg-faded">
  <button class="navbar-toggler hidden-md-down" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰
  </button>
  <div class="collapse navbar-toggleable-md" id="nav-content">
  <a class="navbar-brand" href="http://example.io">example.io</a>
  <ul class="nav navbar-nav">

<% if user_signed_in? %>

    <li class="nav-item"><a class="nav-link"<%= link_to current_user.email, edit_user_registration_path %></li>
    <li class="nav-item"><a class="nav-link"<%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
    <% else %>

    <li class="nav-item">
    <a class="nav-link"<%= link_to "Sign Up", new_user_registration_path%>
    </li>

    <li class="nav-item"><a class="nav-link"<%= link_to "Login", new_user_session_path %>
    </li>

    <% end %>


    <li class="nav-item">
      <a class="nav-link" href="#">Gallery</a>
    </li>

    <li class="nav-item"><a class="nav-link"<%= link_to "About", about_path %></a>
    </li>

    <li class="nav-item">
      <a class="nav-link"<%= link_to "Contact", contact_path %></a>
    </li>

    <li class="nav-item">
      <a class="nav-link" href="#"><i class="fa fa-upload"></i> Uplodad Image</a>
    </li>

  </ul>
  <div class="form-inline pull-xs-right">
  <form class="input-group">
    <input class="form-control" type="text" placeholder="Search for...">
    <span class="input-group-btn">
    <button class="btn btn-success-outline" type="submit">
      <i class="fa fa-search"></i>
    </button>
    </span>
  </form>
</div>
</div>
</nav>

Since you want three different states with regard to the hamburger menu, you'll need JavaScript to accomplish this. If it were just two, you could get away with using a [checkbox](http://stackoverflow.com/a/32721572/2756409) hack. — TylerH, Jan 11 '16 at 22:12

score 1 · Accepted Answer · answered Jan 12 '16 at 01:29

The following changes to _nav.html.erb solved my issue.

<nav class="navbar navbar-full navbar-light bg-faded">
  <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰ example.io
  </button>
  <div class="collapse navbar-toggleable-md" id="nav-content">
  <a class="navbar-brand" href="http://example.io">example.io</a>
  <ul class="nav navbar-nav">

score 0 · Answer 2 · edited Jan 20 '22 at 14:24

0

just give class navbar-expand-xl to the nav container

edited Jan 20 '22 at 14:24

Syscall

19,327
10
37
52

answered Jan 20 '22 at 14:17

SYEDMUHAMMAD TAHA

1

2

See "[Explaining entirely code-based answers](https://meta.stackoverflow.com/q/392712/128421)". While this might be technically correct it doesn't explain why it solves the problem or should be the selected answer. We should educate in addition to help solve the problem. – the Tin Man Jan 21 '22 at 22:56

How to collapse navbar content for medium size screen using bootstrap 4

2 Answers2