Customizable Dropdown Button using HTML and Bootstrap

Can anyone assist me with my dropdown button code issue? It doesn't seem to be working properly.

Here is the code I am using:

        <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="navbarDropdown"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
          Topics
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Technology</a></li>
            <li><a class="dropdown-item" href="#">Web Development</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li>
              <a class="dropdown-item" href="#">Support</a>
              <a class="dropdown-item" href="#">Write For Us</a>
            </li>
          </ul>
        </li>

Answer №1

Make sure to use the following code for the navigation link:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2924243f383f392a3b0bf8c">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="472d363222353e077469726976">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b3bebea5a2a5a3b0a191e5ffe7ffe0">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
    Topics
  </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" href="#">Technology</a></li>
    <li><a class="dropdown-item" href="#">Web Developnment</a></li>
    <li>
      <hr class="dropdown-divider" />
    </li>
    <li>
      <a class="dropdown-item" href="#">Support</a>
      <a class="dropdown-item" href="#">Write For Us</a>
    </li>
  </ul>
</li>

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

What is the best way to achieve this layout using HTML?

[Beginner in Web Design] I am currently experimenting with creating a layout similar to the one shown here: https://i.sstatic.net/j70FD.png Here is what I have attempted so far: .inner, .outer { position: relative; } .dash { border: 0; borde ...

Tips for dynamically adding a class when a specific section is scrolled to, and removing it when the section is passed

Is there a way to dynamically change the scroll behavior and add or remove a class based on certain conditions? I am new to coding, so any guidance would be greatly appreciated. Thank you! :) $(document).on("scroll", function () { ...

unable to show image retrieved from JSON data

Looking to showcase the data from my JSON objects, which are displayed in 2 images below https://i.stack.imgur.com/yhqFy.png https://i.stack.imgur.com/DUgFO.png In the data, I have properties like c_name, max_slots, and an array slots. Within the array, ...

Tips for creating a website loading screen that allows users to fully immerse themselves in the experience

I am looking to improve the visibility of the loading screen that I have created. Ideally, it should last around 3-5 seconds using JQuery, as it is already in use on the website. Below is the code snippet: Additionally, I am not very familiar with JQuery, ...

Upon submitting the form, an Ajax call will execute and transfer data to a distinct views.py template

I'm currently in the process of developing a web application with Django. On the index page, I have implemented a search function. The goal is to trigger an AJAX call when a user submits the form. This AJAX call should gather all the necessary data fr ...

Clicking on an element in the Dropdown Form will directly redirect you to a link, without the need to press a

I'm having trouble with my dropdown form. I want the user to be directed to a specific URL when they click on an element, without needing to hit a submit button. Below is the code I've been working with: <select name="mydropdown" class="style ...

QuickSearch displayed at the center with a floating left alignment

I have been trying to center a QuickSearch div with multiple Q & A sections, but I am having no success. The div is floated to the left and has a background image. HTML <div class="l-row"> <div class="QuickSearch"> <div class="loop"& ...

Breaking apart images with HTML5 canvas

I am currently working on creating a sliding puzzle piece game. By utilizing the canvas element, I successfully divided the image into multiple pieces. To shuffle these pieces, I stored their coordinates in an array, randomized the coordinates, and then up ...

Embedding a CSS class within the primary class selector

Can someone help me with this HTML challenge? <div class="span3"> <div class="abc">code for first div</div> <div class="abc">code for second div</div> </div> I'm trying to hide the first "abc" division within th ...

Tips for creating a responsive table layout

Trying to create a responsive table without using hardcoded pixel values can be tricky. Sometimes, when resizing the window, the column where an image is placed may become too small. Here's the HTML code: <TABLE BORDER=1 style="width: 90%; margin ...

What is the best way to decrease the width of a textfield in jQuery mobile?

Is there a way to decrease the width of a textfield in jQuery mobile? Check out this Fiddle for reference The CSS provided below does not seem to be working properly: #co label{ color: red !important; width: 100px !important; margin :30px; ...

Waypoint function malfunctioning when overflow:hidden is applied

CodePen If you exclude the overflow property from the CSS selector .wrapper in the CodePen example, the waypoints functionality will work properly. However, it does not function correctly when using the overflow set to hidden either horizontally (x) or ...

What could be causing the issue with the pseudo-class :first-of-type not functioning correctly?

How come this piece of code executes successfully, querySelector("p + p"); while the following code snippet results in null? querySelector("p ~ p:first-of-type"); ...

Ways to identify changes in an HTML page following a form redirection

views.py class UpdatePasswordView(PasswordChangeView): form_class = UpdatePasswordForm success_url = reverse_lazy("login") login.html {% if passwordChanged %} <p style="color:green;">Your password has been successfu ...

Save your canvas image as a file and attempt to force a download, only to be met with a failure to

Is there a way to save a canvas as an image file and allow users to choose the format (png or jpg) for download without saving the file on the server? Here's what I have tried: JavaScript Code: $.ajax( { type : "POST", url : "../php/downloa ...

How can I adjust the size and width of the autofocus cursor inside an input box using Angular?

How can I modify the height and width of the cursor in an input field with auto focus? app.component.html <input class="subdisplay" [ngModel]="input | number" type="text" (keyup)="getValue(box.value)" name ...

Copy the content of one input field into another field at the same time

I have encountered an issue that seems simple, yet the proposed solutions have not been effective. Most suggestions involve using jQuery, but Bootstrap 5 has shifted away from jQuery. I am looking for a solution using JavaScript or HTML only. The problem ...

Tips on finding an error message within the website's developer options when the inspector fails to locate it

I'm dealing with a website at On this site, there's a 'get latest blog posts' field that I want to automate the error message for. When I input an invalid email address like test123.com, I receive an error response but can't find ...

Remove the concluding statement from the HTML string if it exceeds the capacity of the iPhone's webView

I have an array of content with certain sections in bold. The bold parts can be located anywhere within the text, so I am utilizing a webView to display an HTML string with appropriate bold tags. However, I am encountering issues where the webViews do not ...

Leveraging JavaScript along with the jQuery library and API to showcase information related to

Hey there! I have been working on this API that shows upcoming concerts, but I'm struggling to display the images associated with each concert. I've tried using for loops to iterate through the objects, and it seems like every sixth element has ...