The Bootstrap navbar collapse feature is malfunctioning

My navigation bar is not functioning correctly with Bootstrap 5. I have all the necessary CSS and JavaScript files included in my HTML, but when I try to toggle the navbar, the dropdown menu does not appear. I have checked my code multiple times and it appears to be in line with the examples provided in the Bootstrap documentation. Can someone assist me in identifying the cause of this issue?

<nav class="navbar navbar-expand-xxl bg-dark navbar-dark py-3 justify-content-between justify-content-xxl-start">
  <div class="container container-fluid">
    <a class="navbar-brand" href="/vacancies/all">
      <img class="navbar-brand" src="/brunojobs.png" class="img-fluid" alt="brunojobs logo" height="45">
    </a>
    <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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">

 
         <a class="nav-link" href="/vacancies/all">Vagas</a>
        </li>
        <% unless company_signed_in? %>
          <li class="nav-item">
            <a class="nav-link" href="/companies/sign_up">Anunciar</a>
          </li>
        <% else %>
          <li class="nav-item">
            <a class="nav-link" href="/vacancies/new">Anunciar</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/vacancies">Meus Anúncios</a>
          </li>
        <% end %>
      </ul>
      <ul class="navbar-nav ms-auto">
          <% if company_signed_in? %>
            <li class="nav-item">
              <a class="nav-link" href="/companies/edit">Meus Dados</a>
            </li>
            <li class="nav-item">
              <%= link_to('Sair', destroy_company_session_path, method: :delete, class: 'nav-link') %>
            </li>
          <% else %>
            <li class="nav-item">
                <a class="nav-link" href="/companies/sign_in">Entrar</a>
            </li>
          <% end %>
      </ul>
    </div>
  </div>
</nav>`

Answer №1

Here is a code snippet that should work for you. Make sure to check the CSS and JS CDN configuration.

<!doctype html>
<html lang="en>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde0fde3feb2bfa3bbb2e0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" >
  </head>
  <body>
    <nav class="navbar navbar-expand-xxl bg-dark navbar-dark py-3 justify-content-between justify-content-xxl-start">
        <div class="container container-fluid">
          <a class="navbar-brand" href="/vacancies/all">
            <img class="navbar-brand" src="/brunojobs.png" class="img-fluid" alt="brunojobs logo" height="45">
          </a>
          <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 me-auto mb-2 mb-lg-0">
              <li class="nav-item">
               <a class="nav-link" href="/vacancies/all">Vagas</a>
              </li>
              <% unless company_signed_in? %>
                <li class="nav-item">
                  <a class="nav-link" href="/companies/sign_up">Anunciar</a>
                </li>
              <% else %>
                <li class="nav-item">
                  <a class="nav-link" href="/vacancies/new">Anunciar</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/vacancies">Meus Anúncios</a>
                </li>
              <% end %>
            </ul>
            <ul class="navbar-nav ms-auto">
                <% if company_signed_in? %>
                  <li class="nav-item">
                    <a class="nav-link" href="/companies/edit">Meus Dados</a>
                  </li>
                  <li class="nav-item">
                    <%= link_to('Sair', destroy_company_session_path, method: :delete, class: 'nav-link') %>
                  </li>
                <% else %>
                  <li class="nav-item">
                      <a class="nav-link" href="/companies/sign_in">Entrar</a>
                  </li>
                <% end %>
            </ul>
          </div>
        </div>
      </nav>

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

Enhance the visual appeal of your checkboxes in React Fluent UI by customizing the color of the checked mark and

I have a React application using Fluent UI. Currently, the <Checkbox/> component is displaying with its default colors and behavior like this: https://i.sstatic.net/ZSL7I.png I want to customize the color of the checked mark and label (Green for ch ...

Modify the font type within the data table

Just starting out with Java and I'm trying to figure out how to change the font family for all texts (header, footer, and body) in a datatable. Any tips on how to do this? I've looked through datatables.jqueryui.css but couldn't find anythi ...

How can you prevent a tag from firing in Google Tag Manager by identifying a particular script included in the HTML code

Seeking advice on modifying our Google Tag Manager container as I am a novice when it comes to GTM. Encountering an issue with IE8 on pages utilizing Fusion Charts resulting in a javascript error in gtm.js. Upon investigation, it appears to be related to a ...

Looking to enable form resubmission with Rails AJAX functionality

Creating an application where I need to implement the functionality of adding people to a department using AJAX. The issue I am facing is that while I can remove people from a department multiple times, I am unable to add them more than once. It appears th ...

adhesive section on the left side with a defined lower boundary

I have a contact div that I made sticky using Bootstrap affix. <div id="contactForm" data-spy="affix" data-offset-top="400"> However, I am unsure of how to limit its bottom to the top of the next div. In other words, I want it to stay in place when ...

React and Material UI: troubleshooting problems with layout columns

I'm working on a project with three columns and I want to include a column for removing each row. Is it possible to add a "removing" column on the right? If so, how can I go about doing it? VIEW CODESANDBOX: HERE const CustomTableRow = ({ row, index ...

Instead of having the animation loop in three.js, let's set it to

After successfully exporting blender JSON animation into THREE.js, I have encountered a situation where everything is functioning correctly. However, my current goal is to only play the animation once and then stop instead of having it loop continuously. ...

Is it wise to use the<sup>attribute for mandatory form fields?

Would it be wise to utilize the <sup> tag instead of using margin-top: -xnumberofpx for indicating required fields in a form? <label for="address1" required>Address line 1<sup><img src="/src/images/requiredAsterix.png" width="10" heig ...

What is the best way to automatically create a line break once the User Input reaches the end of a Textbox?

I've been searching for a solution to this question without any luck. Here is the tag I'm working with: <input type="text" id="userText" class="userTextBox"> And here is my CSS: .userTextBox { /* Add marg ...

Submitting an HTML form to trigger a PHP function through AJAX

I am currently working on a task that involves POSTing an email address entered in an HTML form to a PHP script for storage in a database. The script should also handle error messages if the user inputs an invalid email address. I want to make this process ...

The jQuery code is executing before the AJAX request is fully processed

$("form#go").submit(function(){ var $this = $(this); var btn = $this.find("button"); btn.text("Searching").attr('disabled','disabled'); $.ajax({ url: type: data: dataType: ...

Elements resize based on their parent's and siblings' widths

I have organized the parent div and its three children divs. Presently, the third child is concealed. I've designated the width of the first child as 20% and desire for the second child to automatically take up the remaining width without explicit set ...

Utilizing CSS to create a zoom effect on hover for an image while preserving its original size was successful, however, the issue arises as only a corner of the image is visible

On my webpage, I have implemented an image that zooms in slightly when hovered over. Unfortunately, this animation has caused the image to only display one part regardless of whether hover is activated or not. I've attempted to troubleshoot by adjusti ...

Addressing responsiveness problems with Bootstrap navigation bar

Seeking assistance with setting up the fundamental bootstrap grid system. Despite my efforts, I am unable to make it work. Could someone guide me in creating the basic structure for the Navbar above? Specifically, focusing on using columns and rows with p ...

Is it possible for me to set my HTML body class as ".body" in CSS?

CSS .body { background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff); background-size: 400% 400%; background-repeat:no-repeat; animation: gradient 35s ease infinite; height: 100vh; } HT ...

Updating pages dynamically using AJAX

There's a glitch I can't seem to shake off. I've successfully implemented AJAX for page loading, but an issue persists. When I navigate to another page after the initial load, the new page contains duplicate tags like <head> and <f ...

Sending HTML output to a PHP script

After setting up my HTML form with an action attribute pointing to "filename.php" and a method of post, I managed to generate JSON output by clicking the Submit button using the following code: $('#result').text(JSON.stringify($('form' ...

Steps to Activate a Hyperlink for Opening a Modal Dialogue Box and Allowing it to Open in a New Tab Simultaneously

I am currently working on a website project. Within the website, there is a hyperlink labeled "View Page". The intention is for this link to open the linked page in a modal dialog upon being clicked. Below is the code snippet that I have used to achieve t ...

What is the proper method for utilizing assignments instead of simply assigning values directly?

In the process of developing a markdown editor, I am currently focusing on the functionality of the B (bold) button which needs to toggle. It's important to mention that I am utilizing this library to handle highlighted text in a textarea. Below is t ...

A collaborative effort on Facebook, Twitter, and GooglePlus involves generating SCRIPT tags collectively

If you're familiar with the javascripts used by platforms like Facebook, Twitter, and Google Plus, you'll recognize them below. Here, I've simply organized them neatly together. How can I utilize jQuery to create the script tags and optimiz ...