Issue with Bootstrap Navbar dropdown causing page refresh instead of menu dropdown activation

<!DOCTYPE html>
<html lang="en" dir="ltr" style="style.css">

<!-- All icons were courtesy of FlatIcon : www.flaticon.com and FreePik : www.freepik.com -->

<head>
  <meta charset="utf-8">
  <title>CVV</title>

  <!-- Bootstrap added to the project  -->

  <link rel="stylesheet" href="Resources/bootstrap-5.1.0-dist/css/bootstrap.css">
  <link rel="script" href="Resources/bootstrap-5.1.0-dist/js/bootstrap.js">

  <!-- Fonts from fonts.google.com -->

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="icon" href="Resources/icon.png">

  <!-- "Icon made by Freepik from www.flaticon.com" -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="index.html">
      <img src="Resources/binary-code.png" alt="binary-code-img" height="20px" width="20px;">
      Coder
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#projectsButton"
      aria-controls="projectsButton" aria-expanded="false" aria-label="Dropdown Navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <ul class="navbar-nav ms-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="" id="projectsButton" role="button"
        data-target="dropdown" aria-expanded="false">
          Projects
        </a>
        <ul class="dropdown-menu" aria-labelledby="projectsButton">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Support</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Help</a>
      </li>
    </ul>
  </nav>
</head>

This is my attempt at implementing a Bootstrap 5 dropdown button in the given code. However, clicking on the toggle button just refreshes the webpage instead of showing the dropdown menu.

The rest of the navigation bar elements are functioning correctly, including the brand element which redirects to the home page as expected.

Answer №1

Make sure to include the href="#" attribute and also add the data-target="dropdown" property within the <a> tag

<ul class="navbar-nav ms-auto">

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="projectsButton" role="button" data-bs-toggle="dropdown"
    data-target="dropdown" aria-expanded="false">
      Projects
    </a>
    <ul class="dropdown-menu" aria-labelledby="projectsButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </li>
</ul>

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

Increase the height and width of the inner divs to match the outer div while reducing the number of inner divs

Within my HTML structure, I have three vertical divs that each contain multiple inner div elements. I am looking to achieve a responsive layout where the inner divs wrap into either a 2-column or 1-column grid based on the browser's height and width. ...

Issues with padding and margin not displaying correctly at different screen sizes

I'm currently utilizing tailwindCSS and am facing an issue with adjusting the size of buttons based on screen sizes. I want the buttons to appear small with minimal vertical padding on desktop screens, and bigger with increased vertical padding on mob ...

Code snippet in Python using Selenium where Google Maps is not visible in the page source

Currently, I am attempting to extract GPS coordinates data from a property listing: https://www.primelocation.com/new-homes/details/55357965?search_identifier=d10d089a335cc707245fb6c924bafbd2 The specific GPS coordinates can be found on the "Map & Nearby" ...

Hide the div in PHP if the active variable is null

It looks like I'll need to implement Jquery for this task. I have a print button that should only appear if my array contains data. This is a simplified version of what I'm aiming to achieve: HTML <?include 'anotherpage.php'?> ...

How to vertically align the elements within a DIV in jQuery Mobile

Is there a way to vertically align the content of a jQuery grid's block so that it is centered with another element in the same row? <div class="ui-grid-a" style="border:1px solid"> <div class="ui-block-a" style="vertical-align:middle" >& ...

UI-Router is malfunctioning, causing ui-sref to fail in generating the URL

I'm currently working on a project that involves Angular, Express, and UI-router for managing routes. While I've properly configured my $states and included the necessary Angular and UI-router libraries in my HTML file, I am facing an issue wher ...

Guide on stacking two divs on each other in response to a decrease in screen width

In this particular section, there is a div labeled programDescriptionDiv. Inside programDescriptionDiv, there are two separate divs. Normally, these two divs each take up 50% of the screen width. The goal is to have the second div stack below the first on ...

Creating a scrolling sidebar in Bootstrap 4

Today I learned about CSS Bootstrap 4 and created my template with a sidebar. However, when there are many menus, I want the sidebar to show a scrollbar. I am looking for help on how to make a scrollbar appear on my sidebar template. Below are my HTML and ...

Mastering Bootstrap 5: The art of effectively toggling dropdowns using a different button

Currently, I am working on a project that involves a dropdown menu and a button positioned next to it. The main goal is for the button to open and close the dropdown menu when clicked, and also allow the user to toggle the menu by clicking on the text with ...

Execute index.js code from index.html using NodeJS and Express

Currently, I am diving into the world of NodeJS and Express using Replit.com for a small project. The main objective is to develop a basic input field that, upon submission, will post to different channels such as Discord and Twitter. The piece of code be ...

Tips for relocating several buttons to the upper right corner

I have a dilemma with the positioning of 10 buttons on my webpage. Specifically, I would like to place them in the top right corner, but they are currently at the bottom. Can you assist me with moving the buttons? My desired outcome can be seen here. I s ...

Transforming a plain text field into an input field upon clicking a button or icon using Angular/Typescript

I am a beginner with Angular 6 and I'm trying to implement functionality where clicking a button or icon will change a text field into an input field. See the snippet of code and expected output below. Thank you in advance. <div> <mat-for ...

Using Rails' link_to method within Bootstrap modals

I'm trying to implement a voting system where users can vote on different items displayed in a Bootstrap modal. Each item is listed as a button on the index page, and when clicked, it opens up the modal for voting. However, I'm facing challenges ...

CASL user update has been refreshed

My CASL implementation is quite basic and I've noticed that the documentation lacks detail. The code I'm using is essentially a copy-paste from the docs: import { abilitiesPlugin } from '@casl/vue' import defineAbilitiesFor from &apos ...

Toggle between different socket.io servers for seamless connectivity

I'm looking for help with a situation where I need a socket.io client to connect to server A, disconnect, and then connect to server B. Any ideas on how I can achieve this? Thanks in advance! UPDATE: Attached below is the code snippet that's gi ...

What is the best way to vertically align an InputLabel within a MUI Grid item?

I'm trying to vertically center the InputLabel inside a MUI Grid item. Here's what I've attempted: import { FormControl, Grid, Input, InputLabel, TextField } from "@mui/material"; export default function App() ...

React modal image showing a misaligned image upon clicking

I recently integrated the react-modal-image library into my project to display images in a modal when clicked. However, I encountered an issue where the displayed image is off center with most of it appearing offscreen. I'm unsure what is causing this ...

Is there a way for me to make my Note element automatically update whenever I modify its text content?

Feeling a bit stuck with my project, especially this part. I'm currently using React to develop a notes application, and I'm having trouble updating the note when changing the text within the modal popup. The commented sections are where I need h ...

Responsive design is achieved through the use of mobile media

I am seeking assistance with optimizing my website for mobile devices as it currently displays like the image below. Here are the solutions I have considered so far: Duplicating the 680 lines of CSS within the same document between @media only screen ta ...

Ways to include an additional breakpoint in Bootstrap 5

Recently, I made the transition from Bootstrap 4 to Bootstrap 5 on a project and encountered an issue with an extra breakpoint that no longer functions as intended in BS5. I am now seeking guidance on how to properly incorporate an additional custom breakp ...