Bootstrap 4 Navbar Collapse Issue

Question

So I have a bit of a problem here that has been hanging us up for days now. We can't seem to get the profile icon to stay on the top right when clicking on the expand collapse icon. As you can see in the pictures I linked screenshot 1 is how we want it to appear at all times. Stationed on the right of collapse and not having it drop down as it appears in screenshot 2. We tried searching various threads and tried what was described to no avail. Pull-right, float-right, navbar-right. Nothing seems to work and it is always dragged down when clicking the expand icon. Does anyone have any insight as to what would need to be added to fix this problem? I'll include the code as well for you to take a look at.

Screenshot 1

Screenshot 2

Update, here is my Codepen It doesn't look pretty because of all the ruby links being removed though the error is still present with the profile picture dropping down when extending the collapse mode.

 


  

    <%= link_to "NAVBAR", root_path, class: "navbar-brand navbar-left", id: "brand" %>

  
  
  
    
      
        Blog
      
    
    
      
        About
      
    
  
 
  
    
    
    
     
      <%= link_to "City", cities_path, id: "city_btn", class: "text-white btn btn-info my-4", type: "button" %>
    
  
   

    <% if user_signed_in? %>   
   
    
      
        
          <%= link_to "Link 1", city_url(current_user.city.friendly_id), id: "cs_ms", class: "ml-3 pr-3 nav-link mx-2 theme_color navbar_item_link right_border_link" %>
        
        
          Link 2
        
        
          Link 3
        
      
    
  
  
    
      <%= image_tag current_user.avatar.navbar_pic, id: "nav_facebook_avatar", class: "dropdown-toggle" %>
    
    
       <%= link_to "#{current_user.first_name.capitalize}'s Profile", current_user, style: 'width: auto !important; font-size: 16px;', class: 'dropdown-item p-1 center'  %> 
      

      <%= link_to 'Update', edit_user_registration_path, style: 'font-size: 16px; color: #C361F1;', class: 'dropdown-item p-0 center'  %> 
      
      <%= link_to "Logout", destroy_user_session_path, method: :delete, style: 'font-size: 16px; color: #C361F1;', class: 'dropdown-item p-0 center'  %> 
    
  

    <% else %>  
    
    
      <%= link_to "Login / Signup".html_safe, new_user_session_path, id: "login-su-btn", class: "btn btn-primary" %>
    
    
      <% end %>

orabis · Accepted Answer

Your css requires many changes. Most of your issues are related to using a lot of unnecessary html elements with uneven number of columns. When the dropdown menu shows up, it spans an additional space and goes to the next line. A short way to fix your issue is to set your drop-down menu's position to absolute. You can add the below css (updated CodePen). I followed the same media width you specify in your application.

@media (max-width: 768px){
  #navbarNav{
    position: absolute;
    top: 70px;
  }  
}

However, I would recommend doing a lot of css changes. You can use very simple css rules as you are using Bootstrap 4. You can get rid of row, while keeping the content. Remove unnecessary empty elements such as

and

unless you are using them in your full app. In such a case, you should render them as ul li elements as in Bootstrap 4.

Edit

In order to update the background of the dropdown menu, you may try the following. The color green is only for testing. Here is an updated CodePen.

@media (max-width: 768px){
  #navbarNav{
    position: absolute;
    top: 70px;
  } 

  .navbar-nav.navbar-left{
    background-color: green;
  }
}

Bootstrap 4 Navbar Collapse Issue

Answers (1)

Related Questions