Bootstrap JQuery loading twice - Navbar not collapsing in mobile view

Question

Hello my fellow rails developers,

This is a weird one. My Bootstrap Navbar won't collapse in mobile view; rather when I relaunch the rails server and refresh the view, the navbar shows in a collapsed state for half a second and then returns to expanded mode.

It looks like Jquery might be loading twice or might be loading properly after being erased/overriden by another setting of my app. Which I can't figure out...

Gemfile:

ruby "2.4.1"
gem 'rails', '~> 5.1.4'
gem 'pg', '~> 0.18'
gem 'puma', '~> 3.7'
gem 'uglifier', '>= 1.3.0'
gem 'devise'
gem 'devise-i18n'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '~> 5.0'
gem 'jquery-rails'
gem 'simple_form'
gem 'coffee-rails', '~> 4.2'
gem 'jbuilder', '~> 2.5'

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
  gem 'letter_opener'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

application.scss

@import "bootstrap-sprockets";
@import "bootstrap";

@import url("header.scss");
@import url("footer.scss");
@import url("background.scss");


/* Remove the required * next to email field */
abbr[title="required"] {
  display: none;
} .....

application.js

//= require jquery
//= require rails-ujs
//= require bootstrap
//= require smooth_scroll
//= require_tree .

I have followed the procedure as per the official documentation

The only potentially conflicting actions was that I initially installed Bootstrap 4.0 but had to downgrade to Bootstrap 3.0 as the simple_form gem is not compatible with Bootstrap 4.0 at this time. It was working fine before with Bootstrap 4.

live version of the app can be seen Here

How can I spot the issue? Many thanks indeed

Answer 1

As explained in the following answer

Bootstrap create that navbar collapse effect with media queries

CSS3 allows media dependent style-sheet by media (viewport?) and detect things such as width/height

More reading on media query at the following link :

Now you can go and test/check the css and @media queries performed in the following navbar example

You can see that the navbar has two main componenents, those that will always be displayed:

<div class='navbar-header'></div>

and those that will be hidden when the viewport is smaller then 750px

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

if you check the css property of the first div you see that it has display:block , while the second one has the following css styles:

When the page width is wider then 768px it will have property display: block!important;

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

This property will be lost from this div when the width is lower then 768px , then another property will be applied based on the class collapse that div has.

.collapse {
  display: none;
}

display:none will hide those divs and make your navbar responsive

This property is included in row 3462 of bootstrap.css

So what is your problem (I am boring, I know :-) )

What is the problem

This is the html code for your div

<div class='collapse navbar-collapse'></div>

This is the css style of that div .

At row 4534 you have a media query with min-width:768px that should not be applied. As you can see from the code, this media query change display: none to display:block !important

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block !important;
}

application-8e3…bc19c7f7.css:5
.collapse {
    display: none;
}

but this should not be happening because the window width now is at 337px . I don't really know the clear solution to this, but I can tell you.

You can print the screen js variable on the console and read more info here

So If my page width is set at 475px with the developer toolbar, then I go to the console and input screen

screen
Screen {availWidth: 475, availHeight: 893, width: 475, height: 893, colorDepth: 24, …}

So the width is 475 like in my developer console, so what I am thinking is, the js effect is not running because js is broken. It is not responsive because js is not triggered.

Solution

You can solve this problem by adding in your application.html.erb file the following html code

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
</head>

I tested this on your page and the problem is fixed as you can see from the screenshot