Clicking the Bootstrap NavBar Collapse does not trigger the expected functionality

I'm having some issues with the collapse button in my navbar.

Whenever I click on the navbar button, the collapsible section doesn't open. I suspect that there might be an issue with the data-toggle function not properly toggling the collapse.

I'm also uncertain if the PHP code within the ul tags is causing any interference.

Any help or guidance provided would be greatly appreciated.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Quicksand:300,500" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet">
  <script src="script.js"></script>
  <title>MyCar</title>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.php">MyCar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="navbar-collapse collapse" id="navbarSupportedContent">

  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="cars.php">Search Cars </a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="sell.php">Sell Cars </a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="financing.php">Financing </a>
    </li>
  </ul>
  <ul class="navbar-nav mt-2 mt-lg-0">
    <?php

        if(isset($_SESSION['username'])){

          echo '<li class="nav-item">
                  <a class="nav-link" href="profile.php">Welcome, '.$_SESSION['username'].'<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="?logout=true">Log Out</a>
                </li>'
                ;
        }
        else {
          echo '<li class="nav-item">
          <a class="nav-link" href="signup.php">Sign Up <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="login.php">Log In</a>
        </li>';
        }



    ?>
    <!--<li class="nav-item">
      <a class="nav-link" href='?logout=true'>>Log Out</a>
    </li> -->
  </ul>
</div>
</nav>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The provided link to Bootstrap.min.js is incorrect

  • Replace 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
  • with 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Below is the correct code snippet:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet">
  <script src="script.js"></script>
  <title>MyCar</title>

</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="index.php">MyCar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false">
  <span class="navbar-toggler-icon"></span>
</button>

    <div class="navbar-collapse collapse" id="navbarSupportedContent">

      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="cars.php">Search Cars </a>
        </li>
        <li class="nav-item ">
          <a class="nav-link" href="sell.php">Sell Cars </a>
        </li>
        <li class="nav-item ">
          <a class="nav-link" href="financing.php">Financing </a>
        </li>
      </ul>
      <ul class="navbar-nav mt-2 mt-lg-0">
        <?php

        if(isset($_SESSION['username'])){

          echo '<li class="nav-item">
                  <a class="nav-link" href="profile.php">Welcome, '.$_SESSION['username'].'<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="?logout=true">Log Out</a>
                </li>'
                ;
        }
        else {
          echo '<li class="nav-item">
          <a class="nav-link" href="signup.php">Sign Up <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="login.php">Log In</a>
        </li>';
        }



    ?>
          <!--<li class="nav-item">
      <a class="nav-link" href='?logout=true'>>Log Out</a>
    </li> -->
      </ul>
    </div>
  </nav>

</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

Retrieve the 'name' attributes of selected checkboxes using Express in Node.js

I want to extract the "name" properties from the checked checkboxes in my NodeJS / Express application so that I can download the selected files from a server directory. The Frontend is built using EJS and it generates divs, paragraphs, and checkboxes with ...

htmlnode.jsexpressejs

Utilize a combination of min-height percentages and pixels on a single div element

Currently searching for a method to explain min-height: 500px; min-height: 100%; the reason behind my decision to utilize this? The div must be either 100% in size or larger to allow for overflow. The height should only be set to 500px when the screen i ...

css

By checking the active box and completing the fields, the button will be activated

I'm currently working on a form that requires all fields to be filled out and the acceptance checkbox to be checked before the Submit button becomes active. If any entry or the checkbox is subsequently removed, the button should become inactive again. ...

javascriptjqueryhtml

What is the best way to eliminate the space following the image?

Something strange happened, and now there's a big gap following the top image. I was working on making the code responsive and then inserted this image, which messed everything up. Any ideas on what I might be doing wrong? I want the image to be close ...

htmlcss

Having trouble locating the text box using Selenium in Java. Xpath and CSS selectors are not working

I'm currently attempting to locate the textbox in the HTML snippet below using chromedriver ...

cssgoogle-chromeseleniumxpath

Incorporate a Burger Icon into the Navigation Menu

insert image description here I am currently working on implementing a hamburger slide-out feature in my navigation bar. The desired behavior is for the sidebar to slide out to the right. We are using Elementor within WordPress for this project. Has anyone ...

csswordpressdrop-down-menunavigationelementor

Utilizing Three.js in your HTML code

Currently, I am using c9.io as my IDE to write and test code for a website. Despite my efforts to import the code outside of c9.io, it is still not functioning properly. (I am confident that the issue is not with the three.js script itself.) My HTML code c ...

javascripthtmlthree.js

It is not possible to invoke a function within the AJAX success method

When trying to display an error message in my notify (toast) div using jQuery in Ajax success, I am encountering difficulties. Despite decoding the response from the URL properly, only .show() and .hide() functions seem to work. Although I have used conso ...

javascripthtmljqueryajax

PHP problem encountered when trying to assign values to a dropdown menu from an array

Specifically, the error message that I am encountering is: *Notice: Array to string conversion in C:\xampp\htdocs\Project1_Tables\index.php on line 38 Notice: Array to string conversion in C:\xampp\htdocs\Project1_Tables ...

phphtml

An error of `SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data` is occurring in relation to Django Channels

Whenever I attempt to access a JSON array object sent by the consumer (channels), I encounter the following error message: "SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data" async def websocket_connect(self,event): pri ...

javascriptpythonhtmljsondjango

Extraction of Canonical URLs

I am completely new to VBA programming and I need assistance with extracting links related to specific keywords from a website. My goal is to have these sourced links as the final outcome for all keywords in my list using a VBA program. The code I've ...

htmlexcelvbacanonical-linklocation-href

I am having trouble getting the border-radius to display properly in my email table

I'm in the process of designing a responsive email template. For the white content area, I've applied border-radius: 5px;. While it's working fine on the bottom corners of the table, the top corners don't seem to display the border-rad ...

htmlcssemail

Ways to create an overlapping effect for 3 elements using CSS

There are 3 elements in my setup: <div class="foo"></div> <div class="bar"></div> <div class="foobar"></div> I am looking to have .foo overlap .bar, .bar to overlap .foobar, and .foobar to overlap .foo. This is the de ...

htmlcssz-index

What is the technique for moving a slider-like checkbox slider to one of its labels when they are clicked on?

Is there a way to make the switch slider move to the word the user clicked on (medium or large)? I'm not sure if I can track the movement of the switch slider with JavaScript or if it's possible to do with CSS. Right now, I have only created a si ...

javascripthtmlcss

Formatting Dates and Times in a Bootstrap Form

I'm working on a form that includes date and time type inputs. The fields are set up for mm/dd/yyyy date format and 12-hour AM/PM notation for time. However, I prefer to use dd/mm/yyyy date format and 24-hour notation for time. Is there a way to make ...

htmltwitter-bootstraptwitter-bootstrap-3

Utilizing SASS for customizable color schemes

I am in the process of creating a website using Rails 3 which will allow users to customize their profiles with different layouts and color schemes. I have already implemented SASS, and I believe it would be incredibly useful if I could achieve something l ...

ruby-on-railscsssass

Dompdf is unable to process data exceeding two pages

Having 85 rows in a table with dompdf is functioning properly, but when exceeding 85 rows, they are not displaying on the 3rd page; instead, they are overlapping on the 2nd page. Incorporating dompdf with codeigniter, I've attempted removing all styl ...

htmlcodeigniterdompdf

What sets flex-start apart from baseline?

When using the align-* properties in flexbox, what sets flex-start apart from baseline? In the code snippet below, both align-self: flex-start and align-self: baseline produce the same result. Can you identify scenarios where align-self: flex-start and a ...

htmlcssflexbox

Troubles with Angular2 template parser when parsing HTML fragment that is W3C validated

The online W3C validator successfully parses the following document: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test</title> </head&g ...

htmlangulartypescriptangular2-routingangular2-template

Make the image responsive by aligning the right side accordingly

I am working on making an image responsive using HTML and CSS. My goal is to have the right side of the image crop as the screen size decreases to maintain the height and position of the image, similar to Nike's hero image. I want to keep the white sp ...

htmlcss