Bootstrap along with ROR 3.2.21 has a malfunctioning navbar

I am facing an issue with the Home section in the navbar. It used to work perfectly, but suddenly it stopped displaying as intended. I have checked and confirmed that both boostrap.min.js and boostrap.min.css are loaded properly.

I have included bootstrap.min.js in the vendor folder along with boostrap.min.css. They are also included in application.css and application.js. My config.assets.enabled is set to true, as setting it to false results in no css or js being loaded. I believe this issue is related to the asset pipeline, but despite trying various solutions, nothing seems to fix it.
I installed bootstrap without using a gem by manually downloading the files and placing them in the vendor folder. As a newcomer to Ruby on Rails, I may have missed something important.
Below is my _navbar.html.haml file, which was previously working fine. Hence, I don't think the problem lies there.

%nav.navbar.navbar-default{role: "navigation"}
  / Brand and toggle get grouped for better mobile display
  .navbar-header
    %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
      %span.sr-only Toggle navigation
      %span.icon-bar
      %span.icon-bar
      %span.icon-bar
    =link_to "Home", root_path, :class => "navbar-brand"
  / Collect the nav links, forms, and other content for toggling
  .navbar-collapse.collapse
    %ul.nav.navbar-nav
    - if current_user.admin?
      %li{:class => (current_page?(users_path)? "active" : "")} 
        =link_to "Users", users_path
      %li{:class => (current_page?(member_emails_path)? "active" : "")} 
        =link_to "Member Emails", member_emails_path      
      %li{:class => (current_page?(class_names_path)? "active" : "")} 
        =link_to "Classes", class_names_path      
      %li{:class => (current_page?(class_test_names_path)? "active" : "")} 
        =link_to "Test Categories", class_test_names_path      
      %li{:class => (current_page?(test_entries_path)? "active" : "")} 
        =link_to "Test Entry", test_entries_path
    %ul.nav.navbar-nav.navbar-right
      %li
        =link_to "Sign Out", destroy_user_session_path, :method => :delete

Answer №1

It seems like the problem is not with the CSS, but rather your table is displaying in Bootstrap format.

The issue lies in the indentation of your code.

Take a look at this snippet:

%ul.nav.navbar-nav
- if current_user.admin?
  %li{:class => (current_page?(users_path)? "active" : "")} 
    =link_to "Users", users_path
  %li{:class => (current_page?(member_emails_path)? "active" : "")} 
    =link_to "Member Emails", member_emails_path      
  %li{:class => (current_page?(class_names_path)? "active" : "")} 
    =link_to "Classes", class_names_path      
  %li{:class => (current_page?(class_test_names_path)? "active" : "")} 
    =link_to "Test Categories", class_test_names_path      
  %li{:class => (current_page?(test_entries_path)? "active" : "")} 
    =link_to "Test Entry", test_entries_path

You should actually have it formatted like this:

%ul.nav.navbar-nav
  - if current_user.admin?
    %li{:class => (current_page?(users_path)? "active" : "")} 
      =link_to "Users", users_path
    %li{:class => (current_page?(member_emails_path)? "active" : "")} 
      =link_to "Member Emails", member_emails_path      
    %li{:class => (current_page?(class_names_path)? "active" : "")} 
      =link_to "Classes", class_names_path      
   %li{:class => (current_page?(class_test_names_path)? "active" : "")} 
      =link_to "Test Categories", class_test_names_path      
    %li{:class => (current_page?(test_entries_path)? "active" : "")} 
      =link_to "Test Entry", test_entries_path

The incorrect indentation is causing the HTML to be generated incorrectly, as shown here:

ul
li

Instead of how it should be:

ul
  li

You can verify this by viewing the source of your page.

I hope this explanation clears things up for you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing the principles of angular material design as a stand-alone design system separate from the Angular

Is it possible to exclusively use Angular Material as a design framework, similar to how one would use Bootstrap? I am not particularly inclined to use AngularJS at the moment. Do you have any advice or recommendations on this matter? ...

Identify specific elements using CSS to easily target them with JavaScript later on

Currently, I am utilizing CSS selectors to target specific elements and now I want to be able to identify those elements using javascript. My approach involves setting the color of these elements in css and then retrieving them based on their color. Howeve ...

Organize your information starting from the left and moving to the right

Currently, I am engaged in a project where I need to retrieve commands and showcase them on a screen. However, there seems to be an issue as the commands are appearing one by one and automatically moving down to the footer. What I actually want is for th ...

Clicking on the background does not alter the onclick function

Can anyone help me troubleshoot my code? My function load() isn't changing the background of .firstDiv for some reason. I've checked multiple times but I can't seem to spot any errors. function load() { document.getElementsBy ...

Incorporate a tall button on the right edge of the division

I have successfully implemented a sidebar with the ability to hide or display it using this link. Now, I am looking to add a clickable bar on the right side of the div that can also trigger the hide/show functionality. After experimenting, I discovered th ...

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

How to adjust the vertical spacing between divs in a 960 grid using CSS?

I'm currently experimenting with the 960 grid css framework. How can I eliminate the space between two divs stacked on top of each other? [referring to the gap between the blue lines in the image] I created my CSS using the CSS generator found at . ...

What steps can I take to avoid scaffold.css from taking precedence over my custom CSS?

I'm having trouble with this. It seems like a small issue, but I'm still very new to learning about rails. Any help you can provide would be greatly appreciated! Solution: To resolve the problem, I accessed the file responsible for adding head ...

Vertical spacing on elements utilizing a position of absolute

Looking to create vertical space for elements with position:absolute and changing heights using just CSS. Any clever techniques involving containers or display properties that could be helpful? ...

Next.js experiencing issues with applying styles from .modules.scss files

Recently, I initiated a new Next.js 13 application, Within this project, there exists a file named main.modules.scss .heading { font-size: 4rem; color: #000; } .dark .heading { color: #fff; } My intention is to utilize this file for styling ...

Is there a way to have a div element with a box-shadow effect on top of its h1 child element?

I am facing an issue where a div with a box-shadow and an h1 inside are not aligned properly, causing the shadow to not cover the h1 element. Below is the code snippet in question: h1 { position: absolute; top: 50%; left: 44%; -webkit-t ...

How to correctly serialize nested maps in JQuery ajax data for sending?

var locationData = { "location" : { "name" : $("#user_loc_name").val(), "street_address" : $("#user_loc_street_address").val(), "city" : $("#user_loc_city").val(), "province" : ...

Elevation of the specific area in my design

Can someone help me with a height issue I am experiencing? You can find the page in question here: The problem arises when zooming all the way out - the background of the #article div does not extend to the footer. How can I adjust the height of the #art ...

Transform all characters to lowercase, then capitalize them using only CSS

I came across a discussion on this topic at: First lowercase the text then capitalize it. Is it possible with CSS? However, the solution provided was not purely based on CSS. I have a div that contains the following text: <div> RaWr rAwR </div&g ...

Font size transition on pseudo elements is not functioning properly in Internet Explorer when using the "em" unit

When I hover over, the font awesome icon and text on this transition increase in size. All browsers work well with this effect except for IE 11. This example demonstrates the same transition using px (class test1) and em (class test2). While using px wor ...

Discover the secrets to achieving complete customization of your data table's appearance using the DevExtreme React Grid in conjunction with material-ui

I am facing difficulties in styling the DevExtreme React Grid, which I found from their documentation here. Here is the sample code that I copied from another repository. I have a few questions: How can I have complete control over the styling? I noti ...

Can you explain the distinction between Declared Values and Specified Values?

I found myself confused by the distinction between Declared Values and Specified Values. Initially, I believed that the Declared Values were set by the author. These values then filter down to a single value, known as the "winning value", which becomes t ...

Resetting the state of toggle/click states in AJAX and jQuery

Currently, I am encountering a small dilemma with a .on function and AJAX in conjunction with a mobile menu. The mobile menu is located in the header of a site that relies heavily on AJAX for its content loading. This poses an issue because when an AJAX ca ...

There is a lack of CSS import in the HTML document

I have organized my files in the following structure: - index.html - css/styles.css This is the HTML code I am using: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> & ...

navigation bar icons alignment problem

Help with positioning an icon next to the navbar text Example Code: <ul> <li><a href="#" id="other-color" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-arrow ui-nodisc-icon">Set Filter</a></li> <li> ...