On my desktop, the navbar appears perfectly. However, when I switch to mobile view, the navbar image does not fit properly and the hamburger menu is missing. See the image below:
After refreshing the page, the hamburger menu finally shows up:
I'm not sure if this issue is related to Rails, but it seems like I have to refresh the page to get the hamburger icon to display on the mobile navbar.
<header id="header-wrap">
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg fixed-top scrolling-navbar">
<%= link_to image_tag("logo2.png", alt: "Brand"), root_path, :class=>'navbar-brand' %>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="lni-menu"></span>
<span class="lni-menu"></span>
<span class="lni-menu"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<%= link_to 'Home', root_path, class: 'nav-link dropdown active' %>
</li>
<li class="nav-item">
<%= link_to 'Categories', categories_path, class: 'nav-link' %>
</li>
<li class="nav-item dropdown">
<%= link_to 'Business Directory', business_directory_path, class: 'nav-link dropdown-toggle' %>
</li>
<li class="nav-item dropdown">
<%= link_to 'Partners', partner_path, class: 'nav-link dropdown-toggle' %>
</li>
<li class="nav-item">
<%= link_to 'News & Tech', blogs_path, class: 'nav-link' %>
</li>
</ul>
<ul class="sign-in">
<% if user_signed_in? %>
<li class="nav-item dropdown">
<%= link_to 'My Account', edit_user_registration_path, :class => 'nav-link dropdown-toggle', 'aria-haspopup' => 'true', 'aria-expanded' => 'false' %>
<div class="dropdown-menu">
<%= link_to 'My Ads', myads_path, class: 'dropdown-item' %>
<%= link_to 'Inbox', conversations_path, class: 'dropdown-item' %>
<%= link_to 'Settings', edit_user_registration_path, class: 'dropdown-item' %>
<%= link_to 'Logout', destroy_user_session_path, method: :delete, :class => 'dropdown-item' %>
</div>
</li>
<% else %>
<li class="nav-item">
<%= link_to 'Login / Signup', new_user_session_path, :class => 'nav-link dropdown-toggle' %>
</li>
<% end %>
</ul>
<%= link_to 'Post Ad', new_post_path, :class => 'tg-btn' %>
</div>
</div>
<!-- Mobile Menu Start -->
<ul class="mobile-menu">
<li>
<%= link_to 'Home', root_path, class: 'active' %>
</li>
<li>
<%= link_to 'Catgeories', categories_path %>
</li>
<li>
<%= link_to 'Business Directory', business_directory_path %>
</li>
<li>
<%= link_to 'Partners', partner_path %>
</li>
<li>
<%= link_to 'News & Tech', blogs_path %>
</li>
<li>
<%= link_to 'Post Ad', new_post_path %>
</li>
<li>
<% if user_signed_in? %>
<%= link_to 'My Account', edit_user_registration_path %>
<ul class="dropdown">
<li><%= link_to 'My Account', edit_user_registration_path %></li>
<li><%= link_to 'My Ads', myads_path %></li>
<li><%= link_to 'Settings', edit_user_registration_path %></li>
<li><%= link_to 'Logout', destroy_user_session_path, method: :delete %></li>
</ul>
<% else %>
<%= link_to 'Login / Signup', new_user_registration_path %>
<% end %>
</li>
</ul>
<!-- Mobile Menu End -->
</nav>
</header>
Below is the contents of my application.js file:
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery.slick
//= require local-time
//= require summernote/summernote-bs4.min
//= require summernote-init
//= require social-share-button
//= require activestorage
//= require turbolinks
//= require_tree .