What's the best way to center and expand a Bootstrap 5.3 dropdown menu to fill the entire width of the page?

I want to recreate the dropdown menu seen on this page, with the full width of the page but without any content. Additionally, I need all the "lorem" links in the menu to be centrally aligned in the navbar. Unfortunately, I am unable to modify the bootstrap classes to achieve this. How can I resolve this issue? (please view it in full page mode, and I am unsure why the hover menu does not work with the code snippet)

.navbar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar a:hover {
  text-decoration: underline;
}

.navbar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-menu {
  font-size: 0.8rem;
  left: 0;
  border: none;
  text-align: center;
  position: absolute;
  border-radius: 0;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  visibility: hidden;
  min-width: 100%;
  z-index: 999;
}

.dropdown:hover .dropdown-menu {
  visibility: visible;
}

.dropdown-menu.show {
  display: flex;
}

.dropdown-menu a:hover {
  color: darkgrey;
  text-decoration: none;
}

.dropdown-menu li:first-child a {
  color: darkgrey;
  padding: 20px 0;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d465b465b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" role="button" data-bs-toggle="dropdown" aria-expanded="false">Lorem</a>
          <div class="dropdown-menu">

            <ul>
              <li><a class="dropdown-item" href="">Lorem Ipsum</a></li>
              <li><a class="dropdown-item" href="">Lorem Ipsum</a></li>
              <li><a class="dropdown-item" href="">Lorem Ipsum</a></li>
              <li><a class="dropdown-item" href="">Lorem Ipsum</a></li>
              <li><a class="dropdown-item" href="">Lorem Ipsum</a></li>
              <li><a class="dropdown-item" href="">Lorem Ipsum</a></li>
            </ul>
            <ul>
              <li><a class="dropdown-item" href="">Lorem Ipsum</a></li>
...

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" role="button" data-bs-toggle="dropdown" aria-expanded="false">Lorem</a>
          
          <!-- More dropdown menu items -->

        </li>
      </ul>
    </div>
  </div>
</nav>

Answer №1

Here is the CSS code for a navbar:

.navbar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar a:hover {
  text-decoration: underline;
}

.navbar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-menu {
  font-size: 0.8rem;
  left: 0;
  border: none;
  text-align: center;
  position: absolute;
  border-radius: 0;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  visibility: hidden;
  min-width: 100%;
  z-index: 999;
}

.dropdown:hover .dropdown-menu {
  visibility: visible;
}

.dropdown-menu.show {
  display: flex;
}

.dropdown-menu a:hover {
  color: darkgrey;
  text-decoration: none;
}

.dropdown-menu li:first-child a {
  color: darkgrey;
  padding: 20px 0;
}

If you need JS scripts, here are the ones you can include:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

Answer №2

Have you included the necessary script tags for the JavaScript code?

In order to utilize Bootstrap, you will require both Popper.js and the Bootstrap JavaScript code.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0804190e2b59455a5a4553">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafa2a2b9beb9bfacbd8df8e3Fee3fE">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

For more information, please visit: https://getbootstrap.com/docs/5.3/getting-started/download/#cdn-via-jsdelivr

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

Generated a hierarchical JSON structure from a dynamically generated form

My client has a unique page builder that allows them to create web forms using a convenient drag and drop interface. Currently, the data is output in a JSON format like this: { "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

Utilizing the value selected in a form to trigger an action method without the use of a query

I am currently utilizing pug to generate pages for my nodeJS server. In this particular case, I am attempting to use the value selected in a form select option to dynamically change the action method. Essentially, the goal is to utilize the group name sel ...

What is the best way to prioritize loading JSON models first in three.js and declare a variable before initializing?

I am looking to efficiently load multiple JSON models and store them in global variables for easy access. This will streamline tasks like copying, translating, and more without the need to reload a model each time. After trying various methods, I have not ...

Bugfender is reporting a ReferenceError stating that it can't locate the variable BroadcastChannel

While Bugfender works well in my Vue.js application on Chrome, I am experiencing issues with it on my Safari Mac. Specifically, I am encountering an error in the browser console that says "ReferenceError: Can't find variable: BroadcastChannel". This i ...

What are the steps for scheduling asynchronous tasks using Promises in Node.js?

As a beginner in Javascript, I am struggling to understand how to execute my functions sequentially. My goal is to use Promises to accomplish this task. I am currently following a tutorial on creating a chat bot for Facebook Messenger. Essentially, I want ...

Get the @html.dropdownlistfor filtered for me

Currently, I am working on a project that requires me to filter the options in my second dropdown list based on the selection made in the first dropdown list. While the concept is clear, implementing it becomes tricky as I lack expertise in jQuery or JavaS ...

You are unable to define a module within an NgModule since it is not included in the current Angular compilation

Something strange is happening here as I am encountering an error message stating 'Cannot declare 'FormsModule' in an NgModule as it's not a part of the current compilation' when trying to import 'FormsModule' and 'R ...

Encountering problems with createMediaElementSource in TypeScript/React when using the Web Audio API

Currently, I am following a Web Audio API tutorial from MDN, but with a twist - I am using TypeScript and React instead of vanilla JavaScript. In my React project created with create-react-app, I am utilizing the useRef hook to reference the audio element ...

Maximizing efficiency with JavaScript object reduction

let students = [ { name: "john", marks: 50, }, { name: "mary", marks: 55, }, { name: "peter", marks: 75, }, ]; I need to find the total sum of marks using the reduce method. Here is my att ...

Necessary input in Html.TextBoxFor

Is there a way to format the value of a TextBox using the following structure: <td>@Html.TextBoxFor(m =>(m.Code), new { @required = "required"})</td> Initially, this format works as intended. However, when a default value is set for the T ...

Creating an XPath expression for selecting multiple siblings of a div tag

Currently, I am working on writing an XPath expression for a specific section of code: <div class="line info"> <div class="unit labelInfo TextMdB">First</div> <div class="unit lastUnit"> <div clas ...

Firefox experiencing issues with overflowing HTML content

I am facing an issue with a table inside a div container where the content exceeds the container size. Interestingly, in Internet Explorer, the parent containers automatically expand to fit the table content. However, in Firefox, the div container only w ...

Transforming JSON data into an HTML template

Incorporating Angular 6 in my project, I have come up with the following templates: Header, Left panel, Body part, Footer Header, Left panel, Body part, Right panel, Footer Header, Body part, Footer Considering the numerous templates, I am aiming to tran ...

The internal cjs loader in node threw an error at line 1078

I'm encountering an error on Windows 10 when running the npm command: node:internal/modules/cjs/loader:1063 throw err; ^ Error: Cannot find module 'D:\mobile-version portfolio\ at Module._resolveFilename (node:internal/modules/cjs/load ...

"Make a phone call following the completion of an HTTP

Upon receiving and storing data, I am looking to execute a function but the code I currently have is not producing the desired result. Could someone provide some insight into what I might be doing incorrectly? Here's my current code snippet: $h ...

Developing a placeholder directive with AngularJS

Are you looking to create a unique element in AngularJS to facilitate nested ng-repeats? Take a look at the example below: data.test = [{h:1, d:[11,12]}, {h:2, d:[21,22]}]; ---------------------- <custom ng-repeat="a in data.test"> <h3>{{a ...

Reveal Visual Content upon Hovering

Is there a way to show an image only when the mouse hovers over it? Additionally, can we underline the adjacent text at the same time? If the mouse moves away from the image, I'd like it to hide again and revert the text back to its original state. T ...

Tips for preventing issues with Javascript latency causing flash out during page loading in Chrome

When building a page with Vue.js or any other Javascript, the issue of temporary flash during loading on Chrome due to constructing latency can be quite frustrating. This delay is not caused by asynchronous ajax requests, but rather the processing involv ...

Ways to verify every entered word without having to click a button

My goal is to implement real-time word checking in a textarea using JavaScript/Angular. I want to validate each word as users are typing it out. What is the best approach for achieving this? ...

Display all y-axis values in the tooltip using HighCharts

I utilized a chart example from http://www.highcharts.com/demo/column-stacked When you hover the mouse over a column, it displays the value of the y axis being hovered and the total value. I am interested in having the tooltip show the values of all 3 y ...