CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4navbar
Cray
Cray

Reputation: 5483

Full width dropdown with submenu below nav item

I want to display the submenu of the Bootstrap Navbar as it is per default. Below each navigation item.

But I also want to scale the submenu background to the full width of the browser window.

I tried multiple solutions but couldn't find anything.

At the moment I try to use :before to set a background but that doesn't work either. Is there any solution for that?

Here's my code so far: https://codepen.io/cray_code/pen/QXNVLK

As you can see, there is a solution for the full-width dropdown. But I want the items below it's parent menu item and not on the left side.

This is the CSS for the full width version. There are no changes to the HTML of navbar itself:

.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;
}

Upvotes: 0

Views: 1877

Answers (1)

Sai Manoj
Sai Manoj

Reputation: 3849

  1. you can do this using media queries, if you know your navbar menu items @media only screen and (min-width: 768px).
  2. You can also reduce your code using bootstrap classes. Apply w-100 for dropdown-menu and its parent dropdown should include class position-static
  3. Updated: If you have no control over the menu items then you can achieve this by using jQuery
    $('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>

Upvotes: 1

Related Questions