The functionality of the dropdown link in the Bootstrap navbar is disrupted if the bootstrap.min.js file is included in the

I am a newcomer, so please be patient with me. I took this navbar code from Bootstrap and made some adjustments to fit it into my project.

Within a dropdown list are three dropdown items. My goal is to give users two options: either go directly to the portfolio page for all links or use the dropdown menu.

The link to the portfolio page doesn't seem to work when the last script containing bootstrap.min.js is included in the code. It's unclear why this issue is occurring. When I remove the dropdown feature and just have a regular link, it successfully navigates to the portfolio page. Below is the code snippet:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <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" type="text/css" href="style.css">
    <title>Do You Know Jennipher</title>

  </head>
  <nav class="navbar sticky-top navbar-expand-lg">
    <a class="navbar-brand" href="index.html">Do You Know Jennipher</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="aboutme.html">About Me</a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>

          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="previous_work.html">Egyptian Paradise</a>
            <a class="dropdown-item" href="previous_work.html">Movie Madness</a>
            <a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="gallery.html">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="say_hello.html">Say Hello</a>
        </li>
      </ul>

    </div>
  </nav>
  <header>
    <div class="flex-container">
      <img src="images/banner_ad.jpg" class="banner" alt="banner ad"> 
    </div>
  </header> 
  <body>
    <section class="intro">
      <div class="container">

        <div class="row">
          <div class="col-6">
            <img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
          </div>
          <div class="col-6">
            <p class="intro-text">Hello, my name is Jennipher </p>
          </div>
        </div>
      </div>

    </section>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>

  </body>
  <footer>
    <p class="footer">&#169; Copyright 2019 Jennipher Samms</p>
  </footer>
</html>

javascripthtmlcssbootstrap-4

Answer №1

Ensuring proper body layout and syntax is essential when using the min.js library. It is crucial to place your <script> files before the closing </body> tag. Remember to include elements inside the body rather than outside the body tag. I have made some adjustments to your code for better organization. Please review it.

<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel ="stylesheet" type="text/css" href="style.css">
<title>Do You Know Jennipher</title>

</head>
<body>
        <nav class="navbar sticky-top navbar-expand-lg">
            <a class="navbar-brand" href="index.html">Do You Know Jennipher</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="aboutme.html">About Me</a>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>

                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="previous_work.html">Egyptian Petrdise</a>
                    <a class="dropdown-item" href="previous_work.html">Movie Madness</a>
                    <a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
                </div>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="gallery.html">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="say_hello.html">Say Hello</a>
                </li>
            </ul>

        </div>
        </nav>
    <header>
        <div class="flex-container">
            <img src="images/banner_ad.jpg" class="banner" alt="banner ad"> 
        </div>
    </header> 

<section class="intro">
        <div class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
            </div>
            <div class="col-md-6">
                <p class="intro-text">Hello, my name is Jennipher </p>
            </div>
        </div>
        </div>

</section>
<footer>
    <p class="footer text-center">&#169; Copyright 2019 Jennipher Samms</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

For further guidance on best practices, please refer to this link

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

Error: The function this.saveAlpha is not recognized in the current context at eval

This code features a start button, stop button, and a timer. The goal is to retrieve information from the phone using events like DeviceOrientationEvent, which includes properties such as absolute, alpha, beta, and gamma (referenced in this link: here). I& ...

javascriptvue.js

Increase the width in a leftward direction

I am looking to increase the width from right to left. <div dir="rtl" id="progress"> <dt id='dt'></dt> <dd id='dd'></dd> </div> The ultimate objective here is to have this progress bar progr ...

javascriptjqueryhtmlcssinternationalization

I am experiencing significant lag when attempting to use the Vue mouseover event to manipulate the styles of two elements. Are there any alternative methods that could achieve the same

I'm fairly new when it comes to using Vue, so I might not be approaching this in the most efficient manner. My challenge involves a table of rows generated via a v-for loop, accompanied by a list of corresponding row titles also created through a v-fo ...

javascriptvue.js

Runtime Error: Invalid source property detected - Firebase and Next.js collaboration issue

Currently, I am developing a Next.js application that retrieves data from a Firestore database. The database connection has been successfully established, and the data is populating the app. However, I am facing an issue with displaying the image {marketpl ...

javascriptfirebasegoogle-cloud-firestorenext.js

The npm script isn't executing

In my package.json file, I have the following script: "scripts": { "build": "browserify app/components/main.js -o build/js/app.js -d" } Executing this command from the shell works fine and the file is created successfully. But when I try to run npm bui ...

javascriptnode.jsnpmbrowserify

Avoid encountering issues in case Cookies have not been configured

CoffeeNoticeError After trying to search for possible duplicates without success, I have a coffee-centric website primarily developed using HTML 4, CSS3, JavaScript, and some php. On a page named coffee.html, I have inserted an image that creates a cooki ...

javascriptphphtmlcsscookies

Methods for aligning navbar links vertically when incorporating an oversized icon

When utilizing Bootstrap 5 with Bootstrap Icons, I decided to increase the size of the icon using font-size:1.5rem;. However, this caused a disruption in the vertical alignment for the links (It works fine when the styling is removed and Full Page mode is ...

csstwitter-bootstrapbootstrap-5bootstrap-icons

What could be causing the favicon in my Next.js application to not function properly?

My favicon doesn't seem to be working properly. I've saved the favicon file as favicon.ico in the /public directory and have included a reference to it in the <Head> section of my pages (which are located in the /pages directory), but it s ...

htmlreactjsnext.jsfaviconvercel

What is the correct location to store the bower.json file?

I'm currently using bower 1.2.2 to handle my client-side libraries for the first time with a new node app. I'm unsure whether I should initialize bower in the main project root alongside gruntfile.js and package.json, or within the static directo ...

javascriptnpmbower

What is the best way to eliminate borders on a span element so they collapse seamlessly?

When using the tryit editor on this html and narrowing the result window (to around 200px), the border ends up inside the span as it spans across multiple lines. Is there a way to make the border "collapse" so that it forms a single irregular border around ...

css

Encountered a server error while trying to export from Content

I'm attempting to retrieve data from a specific space in Contentful by utilizing the https://github.com/contentful/contentful-export npm package. However, when I execute my code following the example provided on the GitHub page, I encounter the follow ...

javascriptnode.jsnpmexportcontentful

Improprove the performance of external banner ads by utilizing asynchronous loading or caching techniques

My website is slick, elegant, and loads quickly - that is until the banner ads come into play! A delay of up to 10 seconds in loading occurs due to waiting for the ads, which is frustrating considering the effort I put into optimizing the rest of the site. ...

phpjqueryhtmlaffiliate

Having difficulties sending the form information

Being new to AngularJS, I created a simple popup where users can add tasks and submit them. There is an "Add task" button that dynamically adds fields for users to enter details into. Below is the HTML markup for my popup: <div class="modal-heade ...

javascripthtmlangularjs

Leveraging $_POST data in embedded CSS styling

Can I use a PHP variable in inline CSS code? In the CSS section below, I have tried to incorporate a PHP variable: <style> p { text-align: center; } img{ -moz-animation:<?php $_POST["rmp"]; ?>s rotateRight infinite li ...

phphtmlcssformspost

Unable to reinitialize MUI DatePicker after keydown event

Encountering an unusual behavior that defies explanation has left me puzzled. You can explore the code sandbox here. I am attempting to enable resetting a readOnly field by pressing DEL or BACKSPACE, but it seems to be ineffective. Oddly enough, I can suc ...

javascriptreactjsmaterial-ui

Explore Marker GeoCharts within AngularJS to enhance visualization capabilities

I am trying to customize the markers on a GeoChart similar to the one shown in this example. Could you please guide me on how to add the mapsApiKey in Google GeoChart using the ng-google-chart directive? Here's an example code snippet: var chart = {} ...

javascriptangularjsangularjs-directivegoogle-visualization

ReactJS: Error message indicating that the update depth limit has been exceeded

I'm facing an issue with toggling the state of a component in ReactJS. The error message I am receiving says: Maximum update depth exceeded. This can occur when a component repeatedly calls setState within componentWillUpdate or componentDidUpdate. ...

javascriptreactjsreact-native

Is there a way to modify a button's aspect ratio when it is clicked?

Currently, I am utilizing the MUI v5 AppBar to craft a navigation bar with Tabs. My aim is to have the background of the Tab blend seamlessly with the main page background upon being clicked, as illustrated here: https://i.sstatic.net/e4bDn.png However, a ...

cssreactjsmaterial-ui

Matching utility types and themes in Tailwind CSS

I encountered an issue while trying to implement the Tailwind plugin in my project. It seems that a TypeScript error has occurred. I'm curious about the data types of matchUtilities and themes. Can someone provide some insight? const plugin = require( ...

javascriptcsstypescripttailwind-css

Troubleshooting problem with nested object in AngularJS data table

For my project, I am utilizing an angular js datatable and currently trying to access the following object: "finalizedArr":[ { "treaceId":"KYC454353545", "approval":[ ...

javascriptangularjsngtable