Dropdown menu with submenu positioned beneath navigation element in full width

Question

Dropdown menu with submenu positioned beneath navigation element in full width

I am looking to customize the Bootstrap Navbar submenu to display below each navigation item by default, while also scaling the background of the submenu to fill the width of the browser window.

Despite trying various solutions, I have been unsuccessful in achieving this effect. Currently, my attempt involves using :before to set a background, but even that has not worked. Is there a viable solution for this issue?

You can review my code progress here: https://codepen.io/cray_code/pen/QXNVLK

In the provided code, you will notice that there is a full-width dropdown solution available. However, my goal is to have the submenu items positioned below their parent menu item, rather than at the left side.

The following CSS is specifically for achieving the full-width version, with no alterations made to the HTML structure of the navbar:

.navbar-full .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
}

.navbar-full .dropdown, .navbar-full .navbar-nav .nav-item.dropdown {
    position: static !important;
}

html css twitter-bootstrap bootstrap-4 navbar

Answer 1

Answer №1

To make your navbar responsive, you can utilize media queries. For example,
```
@media only screen and (min-width: 768px)
```
can be used to achieve this.
An alternative approach is to streamline your code by incorporating Bootstrap classes. Assign w-100 to the dropdown-menu element, and include the position-static class in its parent dropdown element.
Update: If you are unable to manually control the menu items, a solution involving jQuery can be implemented.

$('a.nav-link').hover(function () {
  if ($(window).width() >= 768) {
    var myId = $(this).attr("id");
    if ($("#" + myId).length > 0) {
      var pos = Math.round($('#' + myId).position().left) + 12;
      $("a.dropdown-item").css('paddingLeft', pos + 'px');
    }
  }
})

$('a.nav-link').hover(function() {
  if ($(window).width() >= 768) {
    var myId = $(this).attr("id");
    if ($("#" + myId).length > 0) {
      var pos = Math.round($('#' + myId).position().left) + 12;
      $("a.dropdown-item").css('paddingLeft', pos + 'px');
    }
  }
})

li.dropdown:hover>.dropdown-menu {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-full navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown position-static" id="parent">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown 1
          </a>
          <div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
            <a class="dropdown-item mx-auto" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown position-static" id="parent1">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown 2
            </a>
          <div class="dropdown-menu w-100" aria-labelledby="navbarDropdown1">
            <a class="dropdown-item mx-auto" href="#">Hello</a>
            <a class="dropdown-item" href="#">New</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</body>

</html>

Answer 2

To make your navbar responsive, you can utilize media queries. For example,
```
@media only screen and (min-width: 768px)
```
can be used to achieve this.
An alternative approach is to streamline your code by incorporating Bootstrap classes. Assign w-100 to the dropdown-menu element, and include the position-static class in its parent dropdown element.
Update: If you are unable to manually control the menu items, a solution involving jQuery can be implemented.

$('a.nav-link').hover(function () {
  if ($(window).width() >= 768) {
    var myId = $(this).attr("id");
    if ($("#" + myId).length > 0) {
      var pos = Math.round($('#' + myId).position().left) + 12;
      $("a.dropdown-item").css('paddingLeft', pos + 'px');
    }
  }
})

$('a.nav-link').hover(function() {
  if ($(window).width() >= 768) {
    var myId = $(this).attr("id");
    if ($("#" + myId).length > 0) {
      var pos = Math.round($('#' + myId).position().left) + 12;
      $("a.dropdown-item").css('paddingLeft', pos + 'px');
    }
  }
})

li.dropdown:hover>.dropdown-menu {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-full navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown position-static" id="parent">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown 1
          </a>
          <div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
            <a class="dropdown-item mx-auto" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown position-static" id="parent1">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown 2
            </a>
          <div class="dropdown-menu w-100" aria-labelledby="navbarDropdown1">
            <a class="dropdown-item mx-auto" href="#">Hello</a>
            <a class="dropdown-item" href="#">New</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</body>

</html>

Dropdown menu with submenu positioned beneath navigation element in full width

Answer №1

Similar questions

Is it better to store CSS and JavaScript in separate files or within the main HTML document

How can I make the divs resize automatically and have them equal in height when the window is resized?

Highlighting a Table Column with a Radio Button

Tips on eliminating certain text from a hyperlink

The height of the inner div is not extending all the way down to 100% size

Utilize various styles from within a specified font family in CSS

Angular.js' Element.prop('scrollHeight') consistently gives identical values for various list items

The functionality of $j is not available

Using javascript to quickly change the background to a transparent color

JavaScript and jQuery validation issues persisting

Prevent button activation when a different button has already been clicked using jQuery

Use jQuery to add and remove classes while opening and closing div elements individually

Difficulty enforcing mandatory checkboxes

What is the best way to create a board game layout inspired by Monopoly using HTML and CSS?

"Hovering over one div does not trigger the display of another div

Is it possible to achieve the full image when utilizing double buffering for drawing on canvas?

Presenting MongoDB data in a Jinja2 HTML table

When viewing my project on GitHub pages, the images within the card are not appearing

What causes the fading effect on my navigation bar when the slideshow is in use?

When you print, transfer HTML tags to a separate page