'Bootstrap Navbar, background to only be on the right and not the entire width

Using bootstrap's navbar, I'm only using the dropdown toggler icon on the right. I want a background with a width that covers only the right portion and not the entire width. Any insight would be appreciated.

Attempts 1 and 2:

Attempt 1Attempt 2

Trying to get:

Solution

.menu {
  font-family: header;
  color: white !important;
  font-size: 3rem;
  background-color: rgba(0, 0, 0, 0.3);
}

.menu-bg {
  background-color: rgba(0, 0, 0, 0.3);
}

body {
  background: #333 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav class="navbar navbar-dark fixed-top pt-md-5 pe-md-5 pt-2 pe-2">
  <div class="container-fluid">
    <button class="navbar-toggler ms-auto custom-toggler menu collapsed" 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> MENU
    </button>

    <div class="collapse navbar-collapse menu-items" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 menu-bg">
        <li class="nav-item ms-auto">
          <a class="nav-link pe-3" href="#features">FEATURES</a>
        </li>
        <li class="nav-item ms-auto">
          <a class="nav-link pe-3" href="#counter">SHARK COUNTER</a>
        </li>
        <li class="nav-item ms-auto">
          <a class="nav-link pe-3" href="#about">ABOUT US</a>
        </li>
        <li class="nav-item ms-auto">
          <a class="nav-link pe-3" href="#faq">FAQ</a>
        </li>
        <li class="nav-item ms-auto">
          <a class="nav-link pe-3 rounded-bottom" href="#">BACK TO TOP</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
htmlcssbootstrap-5


Solution 1:[1]

Here is a working example. The gist is to use position:absolute and set width to dropdown so that it will stick to the right.

.menu {
font-family: header;
color: white !important;
font-size: 3rem;
background-color: rgba(0, 0, 0, 0.3);
}

.menu-bg {
    background-color: rgba(0, 0, 0, 0.3);
}
#navbarSupportedContent {
  width:150px;
  position: absolute;
  right:0px;
  top:100%;
}

.dropdown-wrap {
  position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark fixed-top pt-md-5 pe-md-5 pt-2 pe-2">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-10"></div>
      <div class="col-xs-2 dropdown-wrap">
        <button class="navbar-toggler ms-auto custom-toggler menu collapsed" 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> MENU
        </button>
        <div class="collapse navbar-collapse menu-items" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0 menu-bg">
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#features">FEATURES</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#counter">SHARK COUNTER</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#about">ABOUT US</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#faq">FAQ</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3 rounded-bottom" href="#">BACK TO TOP</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

Working JSfiddle

Solution 2:[2]

Only:

.menu-bg {
    background-color: rgba(0, 0, 0, 0.3);
    display: inline-block;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Naren Murali
Solution 2 Arman Ebrahimi

Related Questions