I am encountering an issue with the dropdown navigation menu in bootstrap

After creating a dropdown list using the code below, I encountered an issue where the sub-item "game" was not visible during implementation. Does this require any additional CDN? View the screenshot of the implementation.

<head>
    <title>...</title>
    <link href="{% static 'auctions/styles.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565110b150b15">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   

</head>

...................................................

<ul class="nav justify-content-end">
        <li class="nav-item  dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Category</a>
                    <div class="dropdown">
                        <a  class="dropdown-item" href="#"> game</a>
                        <a  class="dropdown-item" href="#"> tech</a>
                        <a  class="dropdown-item" href="#"> learn</a>

                    </div> 
        </li>
        <li class="nav-item">
            <a class="nav-link" href="">Active Listings</a>
        </li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36545959424542445746760218041807">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dropdown/2.0.3/jquery.dropdown.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
javascriptjquerycssbootstrap-4drop-down-menu

Answer №1

(jquery.min.js) Content Delivery Network
is best placed at the bottom of the <body> section rather than in the <head>.

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

Instead of only one menu icon, now there are three menu icons displayed on the screen. (Additionally, two more divs containing

When visiting on a smartphone browser, you may notice that instead of one menu icon, three icons appear. Upon inspecting the elements, you will find that there are three div's that look like this: <div class="responsive-menu-icon">&l ...

javascripthtmljquerycsstwitter-bootstrap

Creating a CSS dropdown menu - Placing a before element in front of the select/option element

How can I position a CSS :before element in front of the foreground content? I am trying to move the text behind the gray area where the dropdown arrow is located. I have already attempted to set the z-index of the before element to 2 and the actual eleme ...

htmlcss

Dealing with audio bleed from a previous recording using fluent-ffmpeg

const Discord = require('discord.js'); const client = new Discord.Client(); const ffmpegInstaller = require('@ffmpeg-installer/ffmpeg'); const ffmpeg = require('fluent-ffmpeg'); ffmpeg.setFfmpegPath(ffmpegInstaller.path); co ...

javascriptnode.jsexpressdiscord.jsfluent-ffmpeg

Minimize all the open child windows from the main Parent window

I would like to implement a functionality where, upon logging in, the user is directed to a Main Page that opens in a new window. This Main Page contains two buttons, each of which will open a specific report associated with it in a new window when clicked ...

javascripthtmllogoutwindow.openwindow.opener

Define the format for the output file name in TypeScript

I am trying to change the filename of a TypeScript generated js file. How can I accomplish this? For instance, I currently have MyCompany.ClassA.ts The default output filename is MyCompany.ClassA.js However, I would like the output filename to be MyComp ...

javascriptvisual-studio-2013msbuildtypescripttypescript1.7

The Sticky Navigation Bar Disappears After a Certain Scroll Point

Looking for some help with my website's navbar - it works fine until I scroll past the blue section, then it disappears along with other elements. Any suggestions on how to fix this? Thanks! <!DOCTYPE html> <html lang="en"> <h ...

htmlcssnavsticky

Laravel: The current configuration does not support the experimental syntax 'classProperties' at this time

When compiling my javascript files using npm run dev, I encountered a warning in my resource/app.js file where I require my custom validation script. The warning stated the following: Module build failed (from ./node_modules/babel-loader/lib/index.js): Syn ...

javascriptlaravelnpmwebpackprototype

Shifting annotations on a Bar Graph featuring Negative Values on Google's Chart Maker

Incorporating google charts into my MVC project. Looking to create a bar chart that accommodates negative values. Desire annotations on the same side as the end of the bar for negative values (similar to positive values shown in the green box below). ht ...

javascriptc#htmlasp.net-mvcgoogle-visualization

Requesting identification results in no response

I am facing an issue with my contact form validation script, which uses Bootstrap 3.2 and the securimage captcha add-on. The IDs of my input and textarea elements are returning as 'undefined', making it impossible to display error messages when n ...

jquery

Having trouble with asynchronous JSON calls in JavaScript when setting async to false

I'm having trouble figuring out what I'm doing wrong in this scenario. The issue is that I can't seem to reassign the variable poster_path with the fetched poster-path from the JSON call. What's puzzling to me is that I even tried setti ...

javascriptjsonapiasynchronous

Buttons are excellent for desktop displays but may not be as visually appealing on mobile devices, especially when using Bootstrap 4

As someone new to coding, I have been given the task of revamping my school's website. I have used buttons for navigation on certain pages, but I have noticed that they do not look good on mobile devices. How can I improve their appearance, perhaps b ...

bootstrap-4

Typescript tutorial: Implementing a 'lambda function call' for external method

The Issue Just recently diving into Typescript, I discovered that lambda functions are utilized to adjust the value of this. However, I find myself stuck on how to pass my view model's this into a function that calls another method that hasn't b ...

javascripthtmlknockout.jslambdatypescript

Extracting information from a child select element within a parent component with ReactJS

My child component includes a select form element that queries my API to populate a select box with the data. I am trying to pass the selected option back to the parent component using an OnChange function, so that I can send the data back to the server. H ...

javascriptreactjs

Button click initiates DataTables search rather than manually entering text in the input field

I am exploring the option of relocating the search function from an input to a button for a table that has been modified using DataTables. Currently, I have a customized input that triggers this function: <script> $(document).ready(function() { ...

javascriptjqueryhtmldatatables

What steps should I take in Three.js to make the "terrain" look three-dimensional?

Currently, I am in the process of developing a 3D terrain using Three.js along with ImprovedNoise.js. Utilizing the examples provided on the Three.js website, I have successfully created what appears to be terrain. However, my issue lies in the fact that i ...

javascript3dthree.jsterrainperlin-noise

Prevent automatic scrolling by clicking when you reach the bottom

In order to replicate the issue I am experiencing, please click on the down button four times, and then click on the up button. You will observe that you need to click the up button one extra time for it to function properly. How can I detect when it has r ...

javascriptjqueryhtmlcss

Navigating safely with the v-model directive in Vue.js

Let's consider the input component below: <input type="text" v-model="example.modules.report.description.title"></input> See full source I don't want to manually define the object structure in the data: example: { modules: { ...

javascriptvue.js

Is the return type determined by the parameter type?

I need to create an interface that can handle different types of parameters from a third-party library, which will determine the return type. The return types could also be complex types or basic types like void or null. Here is a simple example demonstra ...

javascripttypescriptinterface

Watching for changes to an element's visibility within the viewport and automatically scrolling it

I'm having trouble making the input scroll to .here when its value matches "1". Even though I tried using a button with a handle-click function and it worked. Please lend me a hand with this issue. <template> <button @click="scrollToV ...

javascriptvue.jsvuejs3

Having trouble accessing jQuery function within WordPress

Why is there a ReferenceError: Error message that says "manualEntry is not defined," appearing while trying to use the code snippet below in a Wordpress environment? <a href="#" onclick="manualEntry()">hide</a> <script ...

javascriptjquerycsswordpressjquery-events