I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the navbar is no longer visible.
Could it be that I forgot to include a specific gem file? Or perhaps I am embedding the style tags incorrectly?
Here is a snippet from my gem file:
gem 'rails', '~> 5.0.5'
gem 'sqlite3'
gem 'puma', '~> 3.0'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'bootstrap', '~> 4.0.0.beta'
gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.2'
gem "autoprefixer-rails"
gem 'jquery-rails'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
<!-- Code trimmed for brevity -->
Below are the JavaScript requirements:
//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .
My custom CSS looks like this:
.navbar-custom {
border-radius: 0px;
z-index: 16;
box-shadow: 0 2px 3px 0 rgba(0,0,0, .4);
}
For my application.html.erb, the head section includes:
<%= stylesheet_link_tag 'application', media: 'all', 'data-
turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track':
'reload' %>
And this is how the navigation bar is implemented within application.html.erb:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-custom">
<div class="container-fluid d-inline-flex">
<!-- Navigation bar content trimmed for brevity -->