My current challenge involves updating some code that previously worked with a version of Bootstrap 3 and now I am transitioning to version 4.3.1. Specifically, I am working on altering the navbar code, which has undergone significant changes from version 3 to version 4, leading to a number of issues.
Although I referred to... https://getbootstrap.com/docs/4.0/migration/, which outlines the migration process to version 4, I am still unable to make it work correctly.
<nav class="navbar navbar-light navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="margin-top:17px; background-color:white; opacity: 0.7;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%=link_to image_tag("logo.svg", size:"150x59"), store_index_path, :class => "navbar-brand", method: :get %>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
<ul class="nav navbar-nav">
<li><%= link_to t('.questions'), store_index_path, class: "navbar_main_links" %></li>
<li><%= link_to t('.news'), store_index_path, class: "navbar_main_links" %></li>
<li><%= link_to t('.contact'), store_index_path, class: "navbar_main_links" %></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Cog_font_awesome.svg/512px-Cog_font_awesome.svg.png" alt="gear"> </a>
<ul class="dropdown-menu">
<% if session[:user_id] %>
<li><%= link_to "Orders", orders_path, class: "navbar_main_links" %></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Products", products_path, class: "navbar_main_links" %></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Users", users_path, class: "navbar_main_links" %></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Logout", logout_path, method: :delete, class: "navbar_main_links" %></li>
<% else %>
<li><%= link_to "Login", login_path, class: "navbar_main_links" %></li>
<% end %>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="https://image.flaticon.com/icons/png/512/61/61027.png" alt="gear" id="navbar_image_locale"> </a>
<ul class="dropdown-menu">
<% LANGUAGES.each_with_index do |language, index|%>
<li><a href=""><%= link_to language[0].to_s, store_index_url(locale: language[1]), class: "navbar_main_links" %></a></li>
<% if index != LANGUAGES.size-1 %>
<li role="separator" class="divider"></li>
<% end %>
<% end %>
</ul>
</li>
</ul>
<form class="mx-2 my-auto d-inline w-100">
<%= form_tag(store_index_path, method: :get) do %>
<%= text_field_tag :search, '', class: 'form-control border border-right-0' %>
<%= image_submit_tag "https://cdn1.iconfinder.com/data/icons/flat-web-browser/100/search-512.png", id: "navbar_search_image_submit" %>
<% end %>
</form>
</div>
</div>
</nav>
Despite making several adjustments, the rendered output still only displays the image file from the ERB code and a checkbox that triggers the collapse dropdown function.
I suspect that I might be using a deprecated class or encountering a similar issue, but I am unable to pinpoint the exact cause.
Any assistance on resolving this matter would be greatly appreciated :)