Luka Kerr Luka Kerr - 5 months ago 13
Ruby Question

jQuery window resize show button

I've made a simple jQuery function where when the window gets resized to less than 1000, a button with class

navbar-toggle
gets shown, and an unordered list with class
navbar-nav
gets hidden (this is the navigation).

Problem is, when the button gets shown and the navbar gets hidden, the button doesn't actually function as it should - to provide a dropdown list. Just need help to make this button actually function as it should

jQuery function:

$(window).resize(function() {
if ($(window).width() < 1000) {
$(".navbar-toggle").show();
$(".navbar-nav").hide();
} else {
// do nothing
}
});


HTML/ERB:

<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand" href="http://localhost:3000">Buy &amp; Sell</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navHeaderCollapse">
<ul class="nav navbar-nav">
<li><%= link_to "All Items", root_path %></li>
<% Category.all.each do |category| %>
<li><%= link_to category.name, items_path(category: category.name) %></li>
<% end %>
</ul>
<% if user_signed_in? %>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "New Item", new_item_path %></li>
<li><%= link_to "Account", edit_user_registration_path %></li>
<li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
</ul>
<% else %>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<li><%= link_to "Log In", new_user_session_path %></li>
</ul>
<% end %>
</div>
</div>
</div>

Answer

It looks like you're using Bootstrap. There are two steps: 1) Using the standard Bootstrap syntax for for navbars and 2) Setting the mobile menu breakpoint to 1000px.

1) Use the standard Bootstrap syntax for navbars

First, simply adapt your code to fit the example in the Components: Navbar section.

In your case, that would be:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">   
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navHeaderCollapse" aria-expanded="false">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="http://localhost:3000">Buy &amp; Sell</a>

    <div class="collapse navbar-collapse" id="navHeaderCollapse">

        <ul class="nav navbar-nav">
            <li><%= link_to "All Items", root_path %></li>
            <% Category.all.each do |category| %>
            <li><%= link_to category.name, items_path(category: category.name) %></li>
         <% end %>
        </ul>

        <% if user_signed_in? %>
            <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "New Item", new_item_path %></li>
            <li><%= link_to "Account", edit_user_registration_path %></li>
            <li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
        </ul>

        <% else %>
            <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Sign Up", new_user_registration_path %></li>
            <li><%= link_to "Log In", new_user_session_path   %></li>
        </ul>
        <% end %>

    </div>
  </div> 
</div>

You do not need the custom jQuery code! Bootstrap will automatically handle the toggling of the mobile menu for you!

2) Set the mobile menu breakpoint to 1000px

Bootstrap allows you to modify the mobile navbar breakpoint:

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than $grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least $grid-float-breakpoint in width. Adjust this variable in the Sass source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen). This variable is defined in _variables.scss of Bootstrap and then used in _navbar.scss.

If you are using the twbs/bootstrap-sass gem, it is very easy to override the $grid-float-breakpoint variable:

You can override variables by simply redefining a variable before the @import directive.

In your case:

// File: app/assets/stylesheets/application.scss

// Point at which the navbar becomes uncollapsed
$grid-float-breakpoint: 1001px;

// import bootstrap as usual
@import "bootstrap";
Comments