title: Burger Menu Drop Down Navbar background colour
body: <p>First of all, I have not coded properly in around nine years, so I'm trying to re-learn from scratch pretty much.</p>
  <p>I'm having an issue with the background colour of a drop down menu from a burger menu. The burger menu appears when you minimise the screen. I want the background to be white when you click the burger menu but instead it's coming out a dark grey.</p>
  <p>In Codepen it is fine, the background is white. However, on my laptop in all the folders it comes out dark grey. So, I've uploaded the code onto Code Pen and all my folders to Github for folk to try and find the discrepancy which I've been really struggling to spot and understand.</p>
  <p><code>enter code here</code>https://codepen.io/cmc89/pen/RwoYZRR)</p>
  <p>GitHub: <a href="https://github.com/cmc1989/website-toggle.git" rel="nofollow noreferrer">https://github.com/cmc1989/website-toggle.git</a></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7 ]&gt;&lt;html lang=&quot;en&quot; class=&quot;ie6&quot;&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7 ]&gt;&lt;html lang=&quot;en&quot; class=&quot;ie7&quot;&gt;&lt;![endif]--&gt;
  &lt;!--[if IE 8 ]&gt;&lt;html lang=&quot;en&quot; class=&quot;ie8&quot;&gt;&lt;![endif]--&gt;
  &lt;!--[if IE 9 ]&gt;&lt;html lang=&quot;en&quot; class=&quot;ie9&quot;&gt;&lt;![endif]--&gt;
  &lt;!--[if (gt IE 9)|!(IE)]&gt;&lt;!--&gt;&lt;html lang=&quot;en&quot;&gt;&lt;!--&lt;![endif]--&gt; 
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, minimum-scale=1&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
      &lt;script src=&quot;js/script.js&quot; defer&gt;&lt;/script&gt;
      &lt;title&gt;Website&lt;/title&gt;
  &lt;/head&gt;
      
      &lt;body&gt;
        &lt;div id=&quot;wrapper&quot;&gt;
          &lt;nav class=&quot;navbar&quot;&gt;
              &lt;div class=&quot;logo&quot;&gt;&lt;a href=&quot;home.html&quot;&gt;&lt;img src=&quot;images/logo.jpg&quot;&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;a href=&quot;#&quot; class=&quot;toggle-button&quot;&gt;
            &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;div class=&quot;navbar-links&quot;&gt;
            &lt;ul&gt;
              &lt;li&gt;
              &lt;a href=&quot;artwork.html&quot;&gt;Artwork
              &lt;/a&gt;
              &lt;div class=&quot;underline&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-link&quot;&gt;
              &lt;a href=&quot;programming.html&quot;&gt;Programming&lt;/a&gt;
              &lt;div class=&quot;underline&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-link&quot;&gt;
              &lt;a href=&quot;writing.html&quot;&gt;Writing&lt;/a&gt;
              &lt;div class=&quot;underline&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-link&quot;&gt;
              &lt;a href=&quot;talking.html&quot;&gt;Talking&lt;/a&gt;
              &lt;div class=&quot;underline&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-link&quot;&gt;
              &lt;a href=&quot;production.html&quot;&gt;Production&lt;/a&gt;
              &lt;div class=&quot;underline&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-link&quot;&gt;
              &lt;a href=&quot;cv.html&quot;&gt;CV&lt;/a&gt;
              &lt;div class=&quot;underline&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-link&quot;&gt;
              &lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;
              &lt;div class=&quot;underline&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/nav&gt;
            
            &lt;div id=&quot;content&quot;&gt;
        
      &lt;div class=&quot;grid-row&quot;&gt;    
      &lt;div class=&quot;col-4&quot;&gt;
        &lt;div class=&quot;grid-card&quot;&gt;
          &lt;img class=&quot;grid-card-image&quot; src=&quot;images/artwork/americanfuneral2.png&quot;  /&gt;
          &lt;div class=&quot;grid-card-content&quot;&gt;
            &lt;h3&gt;A Feeling for the Organism (2020)&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;col-4&quot;&gt;
        &lt;div class=&quot;grid-card&quot;&gt;
          &lt;img class=&quot;grid-card-image&quot; src=&quot;images/artwork/americanfuneral2.png&quot; /&gt;
          &lt;div class=&quot;grid-card-content&quot;&gt;
              &lt;h3&gt;Organs (2020)&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;col-4&quot;&gt;
        &lt;div class=&quot;grid-card&quot;&gt;
          &lt;img class=&quot;grid-card-image&quot; src=&quot;images/artwork/americanfuneral2.png&quot; /&gt;
          &lt;div class=&quot;grid-card-content&quot;&gt;
            &lt;h3&gt;Private Lives (2019)&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
                &lt;/div&gt;
    
    &lt;div class=&quot;grid-row&quot;&gt;
  
      &lt;div class=&quot;col-4&quot;&gt;
        &lt;div class=&quot;grid-card&quot;&gt;
            &lt;a href=&quot;thesethings.html&quot;&gt;&lt;img class=&quot;grid-card-image&quot; src=&quot;images/artwork/americanfuneral2.png&quot; /&gt;&lt;/a&gt;
          &lt;div class=&quot;grid-card-content&quot;&gt;
            &lt;h3&gt;these were the things that made the step familiar (2019)&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;col-4&quot;&gt;
        &lt;div class=&quot;grid-card&quot;&gt;
          &lt;img class=&quot;grid-card-image&quot; src=&quot;images/artwork/americanfuneral2.png&quot; /&gt;
          &lt;div class=&quot;grid-card-content&quot;&gt;
            &lt;h3&gt;A Strange American Funeral (2019)&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;col-4&quot;&gt;
        &lt;div class=&quot;grid-card&quot;&gt;
          &lt;img class=&quot;grid-card-image&quot; src=&quot;images/artwork/americanfuneral2.png&quot; /&gt;
          &lt;div class=&quot;grid-card-content&quot;&gt;
            &lt;h3&gt;Handwave (2019)&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;    
            
            &lt;/div&gt;
                
      &lt;div class=&quot;grid-row&quot;&gt;
  
      &lt;div class=&quot;col-4&quot;&gt;
        &lt;div class=&quot;grid-card&quot;&gt;
          &lt;img class=&quot;grid-card-image&quot; src=&quot;images/artwork/americanfuneral2.png&quot; /&gt;
          &lt;div class=&quot;grid-card-content&quot;&gt;
            &lt;h3&gt;playback (2018)&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;col-4&quot;&gt;
        &lt;div class=&quot;grid-card&quot;&gt;
          &lt;img class=&quot;grid-card-image&quot; src=&quot;images/artwork/americanfuneral2.png&quot; /&gt;
          &lt;div class=&quot;grid-card-content&quot;&gt;
            &lt;h3&gt;correct (2017)&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;col-4&quot;&gt;
        &lt;div class=&quot;grid-card&quot;&gt;
          &lt;img class=&quot;grid-card-image&quot; src=&quot;images/artwork/americanfuneral2.png&quot; /&gt;
          &lt;div class=&quot;grid-card-content&quot;&gt;
            &lt;h3&gt;Magnificent Beach&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;    
            
            &lt;/div&gt;
            &lt;/div&gt;
            
            &lt;footer&gt;
            &lt;p&gt;© 2020 Website&lt;/p&gt;
            &lt;/footer&gt;
      &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>   * {
      box-sizing: border-box;
  }
  
  body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-color:#ffffff;
  }
  
  
  
  .p1 {
    font-family: prestige-elite-std, monospace;
    font-weight: bold;
    font-size: 20px;
    font-style: italic;
  }
  
  
  .p2 {
    font-family: prestige-elite-std, monospace;
  }
  
  .p3 {
    font-family: TNYAdobeCaslonPro,Times New Roman,Times,serif;
    font-size: 18px;
  }
  
  #wrapper{
    background-color:#ccc2c2;
    width: 100%; 
    max-width: 1200px; 
    position: relative; 
    margin: 0 auto; 
    padding: 5px 0;
  }
  
  .navbar {
      display: flex;
      position: relative;
      justify-content: space-between;
      align-items: center;
      background-color: #ffffff;
      margin: 10px 0 0 0;
  }
  
  .logo {
      font-size: 1.5rem;
      margin: .5rem;
  }
  
  .navbar-links {
      height: 100%;
  }
  
  .navbar-links ul {
      display: flex;
      margin: 0;
      padding: 0;
  }
  
  .navbar-links li {
      list-style: none;
      padding: 0 20px 0 20px;
  }
  
  .navbar-links li a {
      font-family: vollkorn, serif;
      font-size: 20px;
      display: block;
      text-decoration: none;
      color: #262626;
      padding: 5px;
      
  }
  
  .navbar-links li:hover {
     
  }
  
  .navbar-links ul li .underline {
      height: 3px;
      background-color: transparent;
      width: 0%;
      transition: width 0.8s, background-color 0.5s;
      margin: 0 auto;
      
      
  }
  
  .navbar-links ul li.active-link .underline {
      width: 100%;
      background-color: #262626;
  }
  
  .navbar-links ul li:hover .underline {
      background-color: #262626;
      width: 100%;
     
  }
  
  .navbar-links ul li:hover a {
  }
  
  .navbar-links ul li:active a {
      transition: none;
      color: rgba(255,255,255,0.76);
  }
  
  .navbar-links ul li:active .underline {
      transition: none;
      background-color: rgba(255,255,255,0.76);
  }
  
  
  
  .toggle-button {
      position: absolute;
      top: 25px;
      right: 1rem;
      display: none;
      flex-direction: column;
      justify-content: space-between;
      width: 30px;
      height: 21px;
  }
  
  .toggle-button .bar {
      height: 4px;
      width: 100%;
      background-color: #262626;
      border-radius: 10px;
  }
  
  @media (max-width: 1028px) {
      .navbar {
          flex-direction: column;
          align-items: flex-start;
          background: #FFFFFF;
          
          
      }
  
      .toggle-button {
          display: flex;
      }
  
      .navbar-links {
          display: none;
          width: 100%;
          
      }
  
      .navbar-links ul {
          
          flex-direction: column;
          text-align: left;
          width: 40%;
          position:relative;
          left: 35%;
      }
  
      .navbar-links ul li {
          padding: 10px 0;
          text-align: center; 
          width: auto;  
      }
  
      .navbar-links ul li a {
          padding: .5rem 1rem;
          font-family: Arial;
          
          
      }
  
      .navbar-links.active {
          display: flex;
          
      }
  }
  
  #content {
    padding: 5px 0 5px 0 ; 
    position: relative; 
    overflow: hidden;
    
  }
  
  .container {
    position: relative; 
    clear: both; 
    width: 100%; 
    max-width: 1200px; 
    padding: 0;
    overflow: hidden;
    background: #FFFFFF;
  }
  
  
  /* GRID */
  
  .grid-card {
    border: 1px solid #E5E5E5;
    margin-bottom: 20px;
  }
  
  .grid-card:hover{
    opacity: 0.7;
  }
  
  
  .grid-card-image {
    max-width: 100%;
   max-height: 100%;
      
  }
  
  .grid-card-content {
    padding: 5px;
  }
  
  .grid-card-content h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 13px;
  }
  
  .grid-card-content p {
    margin: 0.5em 0;
  }
  
  * {
    box-sizing: border-box;
  }
  
  /* Grid measurements:
   *
   *   960px wide including 12 gutters (half gutters on both edges)
   *
   *   60px columns (12)
   *   20px gutters (two half-gutters + 11 full gutters, so 12 total)
   *
   *
   *   For smaller screens, we always want 20px of padding on either side,
   *   so 960 + 20 + 20 =&gt; 1000px
   *
   **/
  .grid-row {
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
  }
  
  /* Clearfix */
  .grid-row::before,
  .grid-row::after {
    display: table;
    content: '';
  }
  
  .grid-row::after {
    clear: both;
  }
  
  .col-3, .col-4, .col-6, .col-12 {
    float: left;
  
    /* Gutters:
     * Each column is padded by half-a-gutter on each side,
     *
     * Half a gutter is 10px, 10/960 (context) = 1.041666%
     *
     */
    padding-left: 1.04166666%;
    padding-right: 1.04166666%;
  }
  
  /* Mobile defaults */
  .col-3, .col-4, .col-6, .col-12 {
    width: 100%;
  }
  
  
  
  
  /* Non-mobile, grid */
  @media only screen and (min-width: 550px) {
    /* 3 columns, 3/12 in % */
    .col-3 {
      width: 25%;
    }
  
    /* 4 columns, 4/12 in % */
    .col-4 {
      width: 33.333333%;
    }
  
    /* 6 columns, 6/12 in % */
    .col-6 {
      width: 50%;
    }
  
    /* 12 columns, 12/12 in % */
    .col-12 {
      width: 100%;
    }
  }
  
  /* End of GRID */
  
  
  /* FOOTER */
  
  footer {
    text-align: center;
    padding: 3px;
    background-color: #FFFF00;
    color: #262626;
    font-family: prestige-elite-std, monospace;
    
  }
  </code></pre>
  <p>JavaScript:</p>
  <pre><code>const toggleButton = document.getElementsByClassName('toggle-button')[0]
  const navbarLinks = document.getElementsByClassName('navbar-links')[0]
  
  toggleButton.addEventListener('click', () =&gt; {
    navbarLinks.classList.toggle('active')
  })
  </code></pre>
  <p>Thank you for your time.</p>