title: Need help adding background color to drop-down menu on Bootstrap theme
body: <p>EDIT: </p>
  
  <p>I resized the drop-down menu bar, removed the borders &amp; added a box-shadow. The drop-down button is on the right side when clicked the menu opens underneath the site title on the left, here's the updated code &amp; picture of update: 
  <a href="https://i.stack.imgur.com/hoH9U.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body id="page-top"&gt;
  
    &lt;!-- Navigation --&gt;
    &lt;nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav"&gt;
      &lt;div class="container"&gt;
        &lt;a class="navbar-brand js-scroll-trigger" href="#page-top"&gt;My Site&lt;/a&gt;
        &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarResponsive"&gt;
          &lt;ul class="navbar-nav ml-auto my-2 my-lg-0"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link js-scroll-trigger" href="#about"&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link js-scroll-trigger" href="#services"&gt;Services&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link js-scroll-trigger" href="#portfolio"&gt;Portfolio&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link js-scroll-trigger" href="#contact"&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media screen and (max-width:991.98px) {
    .navbar-nav{
      background-color: #f0ede8;
      height: 200px;
      width: 100px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  float:left;
    }
  
    .navbar-nav .nav-item{
      text-align: center  
    }
  }
  </code></pre>
  
  <p>Thanks again for your help!</p>
  
  <p>I'm customizing a Bootstrap theme and would like to keep my navbar transparent but have the drop-down menu have a background color when it's resized to a smaller device. I tried altering the media queries but can't seem to figure this out. I'm still trying to get the hang of Bootstrap. I've attached two screenshots of my site as reference.The first one is how the drop-down menu currently looks. The second one is how I'd like for the drop-down menu to look.</p>
  
  <p><a href="https://i.stack.imgur.com/njGmY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/njGmY.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/wTGbl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wTGbl.png" alt="enter image description here"></a></p>
  
  <p>Thank you!</p>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;body id="page-top"&gt;
  
    &lt;!-- Navigation --&gt;
    &lt;nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav"&gt;
      &lt;div class="container"&gt;
        &lt;a class="navbar-brand js-scroll-trigger" href="#page-top"&gt;My Site&lt;/a&gt;
        &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarResponsive"&gt;
          &lt;ul class="navbar-nav ml-auto my-2 my-lg-0"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link js-scroll-trigger" href="#about"&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link js-scroll-trigger" href="#services"&gt;Services&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link js-scroll-trigger" href="#portfolio"&gt;Portfolio&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link js-scroll-trigger" href="#contact"&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>