The Bootstrap navigation bar fails to expand

After extensive searching, I still can't figure out why my bootstrap menu isn't opening as expected.

I made sure to link JQuery first to try to resolve the issue, but it doesn't seem to have made any difference. I'm starting to wonder if I missed something crucial. Surprisingly, my console isn't showing any errors related to missing JQuery.

Below is my application.html.erb code snippet:

<!DOCTYPE html>
<html>
  <head>
    <title>Peachux</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
    <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
    <script src="https://kit.fontawesome.com/b43f353bd3.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="59293629293c2b77332a196877686b7760">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accec3c3d8dfd8decddcec98829c829c">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </head>

  <body>
    <%= render "shared/navbar" %>
    <%= render "shared/flashes" %>
    <%= yield %>
    <%= render "shared/footer" %>
  </body>
</html>

My application.scss file looks like this:

// Graphical variables
@import "config/fonts";
@import "config/colors";

// External libraries
@import "bootstrap/scss/bootstrap";
@import "font-awesome";

// Your CSS partials
@import "components/index";
@import "components/banner";
@import "components/button";
@import "components/work-card";
@import "components/work-header";
@import "components/profile";
@import "components/form";
@import "components/link";
@import "components/advantages-block";
@import "components/newsletter-block";
@import "components/testimonials";
@import "components/footer";

// Pages partials
@import "pages/home";
@import "pages/index";
@import "pages/works";
@import "pages/about";

Any help or support on this matter would be greatly appreciated!

Answer №1

You've mistakenly added Bootstrap JS and jQuery twice each.

To correct this issue, consider the following code snippet:

<!DOCTYPE html>
<html>

  <head>
    <title>Peachux</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d2e3f0f7b617f617f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
    <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
    <script src="https://kit.fontawesome.com/b43f353bd3.js" crossorigin="anonymous"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10607f606075623e7a6350213e21223e29">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e988b9aaadec4dac4da">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </head>

  <body>
    <%= render "shared/navbar" %>
    <%= render "shared/flashes" %>
    <%= yield %>
    <%= render "shared/footer" %>
  </body>

</html>

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

How do I go about transferring data from an excel sheet to an external API with the help of JQuery/Node.js?

If I possess an excel document that needs to be delivered to an API endpoint which demands the following headers: Content-Type: multipart/form-data Content-Disposition: form-data; name="fileData"; filename="Form_SOMETHING(2).xlsx" Is it plausible for me ...

The styled component is not reflecting the specified theme

I have a suspicion that the CSS transition from my Theme is not being applied to a styled component wrapped in another function, but I can't pinpoint the exact reason. I obtained the Basic MUI Dashboard theme from this source and here. Initially, inte ...

Retrieving data beyond an HTML form

Starting off my PHP page, there is a form with a save button. Beneath that, I display a list of items fetched from the database. Now, I want users to be able to select the items they desire by ticking them off. The issue I'm facing is that all the inf ...

I wish to have the option to choose a courseId when creating a new hole by clicking the "create new hole

I'm currently developing a golf score tracking application. I have set up a database with tables for Rounds, Courses, and Holes. The Hole table contains a foreign key that links to the CourseId, allowing me to associate each hole with a specific cour ...

Hover over a child DIV element to dynamically alter the style of its parent DIV element

Attempting to create a simple CSS hover effect. <div class="menu"> <div class="child"></div> </div> <div class="nav"> <div class="item1"></div> </div> The desired outcome is for the style of < ...

Is it advisable to incorporate the <main> element in my code?

While browsing through w3schools, I came across the <main> element. However, according to caniuse.com, this element is not supported by IE, Opera Mini, and the UC Browser for Android. Should I opt for using a <main> element instead or stick wi ...

Modify the transparency of a form's backdrop without affecting the input fields

I'm attempting to achieve a similar effect as shown in this example on my website form. I've tried using opacity to make the form field background only 20% visible, but it ends up affecting the text inside and when typing. Is there a way to apply ...

Steps for launching a fresh script within the current tab

I'm currently working on a project where I have the following code: window.open("http://localhost/xyz.php") When this code runs, it opens the PHP file in a new tab within the same window. However, I'm trying to figure out how to make it open in ...

Using jQuery to move a div to a specific location on the page

Is there a way to translate the position of div x and y using Jquery that is compatible with all browsers, such as IE 7, IE8, IE9, and IE10? I have attempted the following: <div id="s1" style="-ms-transform:translate(159,430)"> hello ...

How can I utilize CSS shapes to create clickable images?

I'm facing a challenge in making an input field and button functional even when they are positioned behind a uniquely shaped PNG image. https://i.stack.imgur.com/eOg0N.jpg Initially, I believed that by applying a shape to the image, it would automat ...

What is causing the slideDown animation to initially transition into slideUp animation?

When I click a button, I am adding some new results. I am using the slideDown method to display these results, but for some reason, they first slide up and then down again. Additionally, when I remove the added results, they instantly disappear without any ...

What is the best approach to dynamically load html table cell data into a table with changing headers in a React application?

Currently, I am in the process of developing a <table> using React version 0.14.6. This table consists of column headers that are dynamically added to the <thead> section of the table: CourseTable.js: import CourseList from './CourseList ...

Angular components are not receiving the Tailwind CSS attributes applied to :root classes

In my Angular 12 project, I have integrated Tailwind CSS. The structure of the package.json is as below: { "name": "some-angular-app", "version": "0.0.0", "scripts": { "ng": "ng&quo ...

Utilizing :checked selector and toggle() function in jQuery

I'm facing an issue with my jQuery code where the CSS changes are not working as expected. When I test the code, it doesn't apply the CSS changes. If I remove the :checked and just use $("input"), then the CSS works but only when clicking on an i ...

Attempting to extract information from website, successful on majority of sites but encountering issues on this particular one

We are looking to extract dividend data specifically from the Nasdaq exchange similar to this Google Sheets example. While most other URLs work without any issues, the query for this one seems to be failing. <?php $ch = curl_init(); curl_setopt($ch, C ...

Display a JavaScript dialogue box containing a PHP variable

Is there a way to display the correct JavaScript box when using a While loop in PHP? Here is the code snippet: while($result= mysql_fetch_array($data)){ <tr class="<?php echo $style;?>"> <td><?php echo $result['commis ...

Using Javascript, load a URL by making a JQuery ajax GET request and specifying custom headers

I currently have a small single-page application (SPA) using JQuery/Ajax for the frontend and Node/Express for the backend. The user authentication and authorization are handled with JSON-Webtoken, but I encountered an issue. If someone tries to access the ...

Shifting gradient hues for illustrations?

One technique I have mastered is creating dynamic gradient colors for text elements using the following CSS: a { &:hover { background: linear-gradient(-45deg, green, yellow, red, blue); background-size: 200% 200%; animation: gradient-movi ...

Interpolation problem with AngularJS translation service

I've successfully implemented a ternary operator in my HTML: {{ qp.QP_TRANSFERS === '1' ? qp.QP_TRANSFER_TYPE_NAME + ' transfer' : 'No transfer' }} In addition, I am utilizing a translation service with JSON objects. He ...

JQuery Success/Failure Callback does not trigger the function

I'm a beginner with jQuery and I'm trying to use it to call a Python web service and display a message based on the response received. Below is the current jQuery code I have: $(document).ready(function(){ $("#loginForm").submit( function () { ...