Exploring the conundrum of dropdown links in Bootstrap4

I have a little issue with my dropdown menu. The "Documents" link is not redirecting to the correct page.

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="./docs/index.html" data-target="./docs/index.html" target="_blank" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Documents</a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Admin</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Merchant</a>
  </div>
</li>
javascripthtmlcssbootstrap-4

Answer №1

<li class="nav-item dropdown">
    <a href="https://example.com" target="_blank" >Files</a>
    <span class="dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    </span>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="https://example.com" target="_blank">Manager</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="https://example.com" target="_blank">Customer</a>
  </div>
</li>

modify the href link based on your preferences.

Expecting positive outcomes from these changes.

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

Leveraging jquery version 2.2.2 within a grails application

In an effort to ensure compatibility in a Grails project, we are looking to change the JavaScript library versions. We recently added AngularJS 1.5.2, which requires jQuery 2.1+ (source: https://docs.angularjs.org/misc/faq). Our current version of jQuery i ...

javascriptjqueryangularjsgrails

Managing errors that occur while handling JSON with AJAX by implementing a suitable backup plan

Imagine there is a user.json file stored on a web server that contains: { "name” : “ivana”, “age” : “27” } Now, I make a request to retrieve this JSON data using the following code: var user = $.ajax({ url: pathsample.com/user.js ...

javascriptjqueryjson

Scrolling vertically on android using Phonegap

Currently, I am working with a dynamic list on PhoneGap. Is there a way to implement a vertical scroller for a basic ul and li list? I attempted applying overflow:auto to the div, but even though the scroller is visible, it does not work as expected. I p ...

androidhtmlcsscordova

Add extra space to the dimensions of the div by incorporating padding

Showing my issue with an accompanying image: I am looking for a solution to include padding in the width: 50%; calculation. Currently, the first div's width is actually 50% + 2em because the padding was not factored in initially. Is there a way to i ...

htmlcsswidthpadding

Calculate the difference and sum of time values with varying signs in JavaScript

-12:00 - 5:30 => -6:30 -2:00 - 5:30 => 3:30 00:00 - 5:30 => -5:30 6:00 - 2:30 => 3:30 I am interested in subtracting time with both positive and negative indices. let myCountries = [ { countryName: "NewZealand", ...

javascriptnode.jsreactjsangularjstypescript

Achieving Text Centering in kableExtra Cells with CSS: A Step-by-Step Guide

Recently, I received a helpful solution that involved using the extra_css = argument in cell_spec() from the kableExtra package. This allowed me to fill the entire cell of my table instead of just the text inside it. However, even after specifying align = ...

cssrkableextra

Tips for developing a sophisticated HTML quiz

I have spent countless hours perfecting this quiz. I have successfully created a quiz that reveals solutions at the end, but I want to take it one step further. I envision the answers appearing after each incorrect response from the user, and no answer sho ...

javascripthtml

Error in Angular-CLI: The return type of a public method from an exported class is referencing the name 'ErrorObservable' from an external module, but it cannot be named as such

Upon completing the development of an app that mirrors an existing Angular 2 (non-cli) application, I am encountering errors in several of my files now that the project has been transitioned to Angular-CLI. I am puzzled as to why these errors are arising i ...

javascriptangulartypescriptrxjsangular-cli

Waiting for a NodeJS function to finish execution

In my application, I have a `Client` class that requires different configurations for each user when receiving messages on Discord (a chat application with its own API calls for checking new messages). I have initialized the object constructor with new con ...

javascriptnode.js

JavaScript never forgets to validate the user input

Forgive me for my lack of experience, but I am new to this and seeking guidance. I am struggling to find a straightforward example on how to validate HTML input using JavaScript. Currently, I am working on a search function and need help in implementing ...

javascript

Get a PNG file in the form of binary/octet-stream for download

https://i.sstatic.net/VFMbl.pngsteps to recreate the issue: I have a Blob object that I am saving as form data through a service. The response I receive has a content-type of application/octet-stream, as shown in the attached image. What result is expect ...

javascriptangulartypescriptblobcontent-type

when successful, refresh the page

I am currently utilizing the following javascript code to load recrefresh.php when the page first loads. Upon executing the ajaxvote function, I aim for the subsequent div to be refreshed: <div class="recrefresh"></div> After attempting to ad ...

javascriptjquery

Animation scaling on the iPhone seems to abruptly jump away once it finishes

Encountering an issue with animations that is causing unexpected behavior on physical iPhone devices but not in the simulators. The problem arises when the background zooms in and then the div suddenly jumps to the left after the animation completes, as sh ...

cssreactjstypescriptanimationstyled-components

How can I change a date string into a date object?

Seeking assistance: I am looking to generate the following: Sunday 4 October 08.30 - 10.30 CET Additionally, I would like to show the local timezone information below this line. Could someone recommend the most effective method for achieving this? Can ...

javascriptstringdateparsingmomentjs

What is the method for accessing a variable that has been defined within server.js from within my ejs script tag?

Currently working on my first NodeJS project which involves a significant amount of file management. I've been thinking about how to streamline the process by accessing a variable created in my server.js within a script tag inside one of my ejs files. ...

javascriptnode.jsexpressejs

Prevent horizontal scrolling on mobile devices

To prevent vertical scrolling on mobile devices, I attempted using the CSS code: body {overflow-x:hidden} This successfully disables vertical scrolling in regular browsers. However, if there is an element wider than the screen on mobile, it still allows ...

jqueryhtmlcss

Use the uploaded image to customize the background of the website

Recently, I created a basic image upload script. After uploading the image, an idea struck me - what if the background of the linking screen could be set to the uploaded image? However, I am unsure how to go about doing this or if it is even possible. Ca ...

javascriptphphtmljquerycss

Displaying a dynamic splash screen during the resource-loading process on an Android application

I would like to implement an animated image (currently using a set of PNGs) as a splash screen while my resources are loading. I have successfully displayed the splash screen using this method. However, the issue I am facing is that the splash screen appe ...

javascriptandroidhtmlcordova

Having trouble retrieving data from the json file

Using Ajax to obtain a JSON update: $(document).ready(function(){ $('form').submit(function(event){ event.preventDefault(); var form = JSON.stringify($('form').serializeArray()); $.ajax ({ u ...

javascriptjqueryajaxjson

The typing library for Angular does not properly identify the JQueryStatic object

Encountered an issue with the Angular declaration file: Error TS2304: Cannot locate identifier 'JQueryStatic'. The typings for jQuery are installed and properly declare JQueryStatic as an interface. Looking for solutions to resolve this error. ...

javascriptjqueryangularjstypescripttypescript-typings