Probably the Bootstrap framework is causing the "Friends" nav-item to not appear correctly

Question

I am new in Bootstrap and using Bootstrap 4 with Bootstrap 5 code mixed. I am trying to display the Friends and About Us links in the navbar, but they don't even appear The code is

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<%= link_to 'Friend App', root_path, class:"navbar-brand" %>
 
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        
        <li class="nav-item">
          <%= link_to "About Us", home_about_path, class:"nav-link" %>
        </li>
       
        <li class="nav-item">
          <%= link_to "Friends", friends_path, class:"nav-link" %>
        </li>
        
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

I checked

That the friends_path is defined in my routes.rb file. I am sure that it matches the correct path for the "Friends" page in your application.
I ensured that the friends_path returns the correct URL. You can check this by opening up the browser's console and inspecting the network requests to see if the correct URL is being requested.

But yet nothing appears besides the Friend App in the navbar enter image description here

It has to appear something like this enter image description here

Thanks for your time

Ivan Ordonez · Answer 1 · 2023-03-23T00:37:10.113

Apparently is a space problem, works fine in browser with more pixels, just maximize it. Any ways you can fix it by putting <%= link_to "About Us", home_about_path, class:"navvar-brand" %> next to Friend App

so the final header stays like this

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<%= link_to 'Friend App', root_path, class:"navbar-brand" %> 
<%= link_to "About Us", home_about_path, class:"navvar-brand" %>

<button class="navbar-toggler" type="button" ... and so on

Probably the Bootstrap framework is causing the "Friends" nav-item to not appear correctly

1 Answers1