My Rails app has a navbar crafted with Bootstrap, but it's displaying vertically instead of horizontally. To see the issue in action, you can visit the app here. Despite referencing several articles on the topic (listed below), the problem remains unresolved.
bootstrap navbar displays vertically instead of horizontally
Bootstrap navbar appearing vertically instead of horizontal
Bootstrap navbar is displaying vertically instead of horizontally
navbar is vertical instead of horizontal
Followed a tutorial with identical code where the navbar functions correctly.
For reference, here is the link to the tutorial GitHub repository: https://github.com/StephenFiser/FrogBlog/blob/master/app/views/layouts/_navbar.html.erb
The navbar code is situated in a partial, comprising one dropdown and one regular navbar, both rendering vertically.
Below is the content of my navbar partial _navbar.html.erb
#----------dropdown navbar menu code----------
<div class="collapse" id="exCollapsingNavbar">
<div class="collapse-bg p-a-1">
<div class='card'>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<%= link_to 'Blog', root_path, class: "nav-link #{yield(:blog_active)}" %>
</li>
<li class="list-group-item">
<%= link_to 'About', about_path, class: "nav-link #{yield(:about_active)}" %>
</li>
<li class="list-group-item">
<%= link_to 'Contact', contact_path, class: "nav-link #{yield(:contact_active)}" %>
</li>
<% if author_signed_in? %>
<li class="list-group-item">
<%= link_to 'My posts', authors_posts_path, class: "nav-link #{yield(:author)}" %>
</li>
<li class="list-group-item">
<%= link_to 'Logout', destroy_author_session_path, method: :delete, class: "nav-link" %>
</li>
<% end %>
</ul>
</div>
</div>
</div>
#---------------normal non-dropdown navbar code-----------
<nav class="navbar navbar-light bg-faded">
<div class='container'>
<a class='navbar-brand' href='/'>
Frog<span class='light'>blog</span>
</a>
<button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
☰
</button>
<ul class="nav navbar-nav pull-sm-right hidden-xs-down">
<li class="nav-item">
<%= link_to 'Blog', root_path, class: "nav-link #{yield(:blog_active)}" %>
</li>
<li class="nav-item">
<%= link_to 'About', about_path, class: "nav-link #{yield(:about_active)}" %>
</li>
<li class="nav-item">
<%= link_to 'Contact', contact_path, class: "nav-link #{yield(:contact_active)}" %>
</li>
<% if author_signed_in? %>
<li class="nav-item dropdown author-nav">
<a class="nav-link dropdown-toggle <%= yield(:author) %>" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<%= image_tag(current_author.gravatar_image_url) %>
<%= current_author.display_name %>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<%= link_to 'My posts', authors_posts_path, class: "dropdown-item" %>
<%= link_to 'Account', authors_account_path, class: "dropdown-item" %>
<%= link_to 'Logout', destroy_author_session_path, method: :delete, class: "dropdown-item" %>
</div>
</li>
<% end %>
</ul>
</div>
</nav>
It appears that the navbar's container height needs adjustment to fix the vertical orientation. Should I try changing the container, and if so, how can I modify this in the Rails CSS? Alternatively, is there a specific Bootstrap class I can include to correct the vertical display?