Responsive dropdown menu in Bootstrap 5 navbar

Question

Responsive dropdown menu in Bootstrap 5 navbar

Update: I successfully fixed the desktop version. Now, I just need to work on making it responsive for mobile.

The problem I am encountering is that the dropdown menu doesn't function properly on both mobile and desktop. Although the styling looks good for both interfaces, the functionality is lacking. I tried adding placeholder links to the dropdown items to test if they would display, but unfortunately, they did not.

Here is the code snippet for the menu in question:

<nav id="navbar"class="navbar navbar-expand-lg">
  …
</nav>

I can see the classes shifting between collapsed and collapsing but I'm unable to see any of the dropdown items displayed.

Does anyone have insight into why the menu items are not appearing? Could this be due to conflicting pre-existing CSS rules? (I've checked this to some extent already as my initial suspicion, but disabling obvious ones didn't help show the items.) Should I delve deeper into my custom CSS?

Additionally, I'm currently struggling to make the sticky navigation work again. I had it working for a simpler Bootstrap menu before so I'll figure it out. However, I'm open to any helpful advice or suggestions from the community.

Please find below my current compiled CSS:

/* Compiled CSS styles go here */
…

html css menu navbar bootstrap-5

Answer 1

Answer №1

When in collapsed mode on mobile devices, the functionality of the hamburger icon relies on the necessary JavaScript bundle being included. For example, you can include https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js. Additionally, be cautious of any loose a tags (anchors) in your markup as they may have been unintentionally copied from examples on Bootstrap's website.

Review the following functional code:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130c130e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a657a67">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<nav id="navbar" class="navbar navbar-light navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img class="navbar-brand" src="[[++url_images]]/logos/logo.jpg" alt="Your image is not loading"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon text-dark"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" >
        <li class="nav-item">
          <a class="nav-link active home" aria-current="page" href="https://www.google.com">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link about" href="https://www.google.com">About us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link contact" href="https://www.google.com">Contact</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="https://www.google.com">Action</a></li>
            <li><a class="dropdown-item" href="https://www.google.com">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="https://www.google.com">Something else here</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Answer 2

When in collapsed mode on mobile devices, the functionality of the hamburger icon relies on the necessary JavaScript bundle being included. For example, you can include https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js. Additionally, be cautious of any loose a tags (anchors) in your markup as they may have been unintentionally copied from examples on Bootstrap's website.

Review the following functional code:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130c130e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a657a67">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<nav id="navbar" class="navbar navbar-light navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img class="navbar-brand" src="[[++url_images]]/logos/logo.jpg" alt="Your image is not loading"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon text-dark"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" >
        <li class="nav-item">
          <a class="nav-link active home" aria-current="page" href="https://www.google.com">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link about" href="https://www.google.com">About us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link contact" href="https://www.google.com">Contact</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="https://www.google.com">Action</a></li>
            <li><a class="dropdown-item" href="https://www.google.com">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="https://www.google.com">Something else here</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Answer 3

Answer №2

After my recent update on desktop functionality, I successfully managed to make it work on mobile as well.

There are still some styling issues to address, particularly with the menu placement across different devices. Currently, my quick fix involved using a fixed position.

However, the main issue of it not working initially has been resolved by implementing the following code:

  <div class="container-fluid">
    <img class="navbar-brand" src="[[++url_images]]/logos/logo.jpg" alt="Your image is not loading"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav navbar-nav-scroll">
        <li class="nav-item">
          <a class="nav-link active home" aria-current="page" href="https://www.google.com">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link about" href="https://www.google.com">About us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link contact" href="https://www.google.com">Contact</a>
    </div>
  </div>
</nav>

Compiled CSS (current version excluding remaining style issues):

To see the visual representation, check out the DesktopMenu and Mobile Menu images.

Big thanks to everyone who offered assistance during this process.

Answer 4

After my recent update on desktop functionality, I successfully managed to make it work on mobile as well.

There are still some styling issues to address, particularly with the menu placement across different devices. Currently, my quick fix involved using a fixed position.

However, the main issue of it not working initially has been resolved by implementing the following code:

  <div class="container-fluid">
    <img class="navbar-brand" src="[[++url_images]]/logos/logo.jpg" alt="Your image is not loading"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav navbar-nav-scroll">
        <li class="nav-item">
          <a class="nav-link active home" aria-current="page" href="https://www.google.com">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link about" href="https://www.google.com">About us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link contact" href="https://www.google.com">Contact</a>
    </div>
  </div>
</nav>

Compiled CSS (current version excluding remaining style issues):

To see the visual representation, check out the DesktopMenu and Mobile Menu images.

Big thanks to everyone who offered assistance during this process.

Answer 5

Answer №3

A custom Bootstrap 5 menu with multilevel dropdowns and flexible configurations for left or right expansion. No additional CSS is needed as this menu is "naked."

Tested in Bootstrap 5.2.2, this menu includes Font Awesome icons for a hamburger toggle.

To see the demo, screenshots, and access the source code (including the necessary CSS), visit:

https://github.com/lasseedsvik/Bootstrap-5-Mega-menu

If you prefer not to use Font Awesome, the hamburger icon can easily be replaced with something else in the menu design.

Answer 6

A custom Bootstrap 5 menu with multilevel dropdowns and flexible configurations for left or right expansion. No additional CSS is needed as this menu is "naked."

Tested in Bootstrap 5.2.2, this menu includes Font Awesome icons for a hamburger toggle.

To see the demo, screenshots, and access the source code (including the necessary CSS), visit:

https://github.com/lasseedsvik/Bootstrap-5-Mega-menu

If you prefer not to use Font Awesome, the hamburger icon can easily be replaced with something else in the menu design.

Responsive dropdown menu in Bootstrap 5 navbar

Answer №1

Answer №2

Answer №3

Similar questions

Setting up a global CSS and SASS stylesheet for webpack, TypeScript, Phaser, and Angular: A step-by-step guide

Change "Only" regular text into clickable links without altering any current hyperlinks

Challenges with resizing images in SVG using D3

Error in Javascript: Null Object

There seems to be an issue with the border displaying correctly within the div element

Highlighting table rows when hovering in IE with JQuery - compatibility across all versions

Trouble with image size transition not functioning properly

Move a sub-division horizontally within a parent element that has a full width of 100%

Using JavaScript and HTML, create a click event that triggers a drop-down text

Choosing a single radio button value within a nested ng-repeat loop in AngularJS

Learning how to implement the selection tag to upload data to a SQL database using PHP

Creating a dynamic overlapping image effect with CSS and JavaScript

single-use date availability checker

The CSS outline has a soft, rounded appearance rather than a sharp

Material UI drop down select position placement

What Could Be Causing My Webfonts to Be Inaccessible on Windows Devices and iPhones?

Selected Angular Radio Button

Navigate to the top of the page using jQuery

The issue of exceeding margins

I'm seeking guidance on how to delete a specific ul li element by its id after making an ajax request to delete a corresponding row in MySQL database. I'm unsure about the correct placement for the jQuery