1

First of all, I have not coded properly in around nine years, so I'm trying to re-learn from scratch pretty much.

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.

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.

enter code herehttps://codepen.io/cmc89/pen/RwoYZRR)

GitHub: https://github.com/cmc1989/website-toggle.git

<!DOCTYPE html>
<!--[if lt IE 7 ]><html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]--> 

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/script.js" defer></script>
    <title>Website</title>
</head>
    
    <body>
      <div id="wrapper">
        <nav class="navbar">
            <div class="logo"><a href="home.html"><img src="images/logo.jpg"></a></div>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
        <div class="navbar-links">
          <ul>
            <li>
            <a href="artwork.html">Artwork
            </a>
            <div class="underline"></div>
        </li>
        <li class="nav-link">
            <a href="programming.html">Programming</a>
            <div class="underline"></div>
        </li>
        <li class="nav-link">
            <a href="writing.html">Writing</a>
            <div class="underline"></div>
        </li>
        <li class="nav-link">
            <a href="talking.html">Talking</a>
            <div class="underline"></div>
        </li>
        <li class="nav-link">
            <a href="production.html">Production</a>
            <div class="underline"></div>
        </li>
        <li class="nav-link">
            <a href="cv.html">CV</a>
            <div class="underline"></div>
        </li>
        <li class="nav-link">
            <a href="about.html">About</a>
            <div class="underline"></div>
        </li>
          </ul>
        </div>
        </nav>
          
          <div id="content">
      
    <div class="grid-row">    
    <div class="col-4">
      <div class="grid-card">
        <img class="grid-card-image" src="images/artwork/americanfuneral2.png"  />
        <div class="grid-card-content">
          <h3>A Feeling for the Organism (2020)</h3>
        </div>
      </div>
    </div>

    <div class="col-4">
      <div class="grid-card">
        <img class="grid-card-image" src="images/artwork/americanfuneral2.png" />
        <div class="grid-card-content">
            <h3>Organs (2020)</h3>
        </div>
      </div>
    </div>

    <div class="col-4">
      <div class="grid-card">
        <img class="grid-card-image" src="images/artwork/americanfuneral2.png" />
        <div class="grid-card-content">
          <h3>Private Lives (2019)</h3>
        </div>
      </div>
    </div>
              </div>
  
  <div class="grid-row">

    <div class="col-4">
      <div class="grid-card">
          <a href="thesethings.html"><img class="grid-card-image" src="images/artwork/americanfuneral2.png" /></a>
        <div class="grid-card-content">
          <h3>these were the things that made the step familiar (2019)</h3>
        </div>
      </div>
    </div>

    <div class="col-4">
      <div class="grid-card">
        <img class="grid-card-image" src="images/artwork/americanfuneral2.png" />
        <div class="grid-card-content">
          <h3>A Strange American Funeral (2019)</h3>
        </div>
      </div>
    </div>

    <div class="col-4">
      <div class="grid-card">
        <img class="grid-card-image" src="images/artwork/americanfuneral2.png" />
        <div class="grid-card-content">
          <h3>Handwave (2019)</h3>
        </div>
      </div>
    </div>    
          
          </div>
              
    <div class="grid-row">

    <div class="col-4">
      <div class="grid-card">
        <img class="grid-card-image" src="images/artwork/americanfuneral2.png" />
        <div class="grid-card-content">
          <h3>playback (2018)</h3>
        </div>
      </div>
    </div>

    <div class="col-4">
      <div class="grid-card">
        <img class="grid-card-image" src="images/artwork/americanfuneral2.png" />
        <div class="grid-card-content">
          <h3>correct (2017)</h3>
        </div>
      </div>
    </div>

    <div class="col-4">
      <div class="grid-card">
        <img class="grid-card-image" src="images/artwork/americanfuneral2.png" />
        <div class="grid-card-content">
          <h3>Magnificent Beach</h3>
        </div>
      </div>
    </div>    
          
          </div>
          </div>
          
          <footer>
          <p>© 2020 Website</p>
          </footer>
    </div>

CSS:

   * {
    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 => 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;
  
}

JavaScript:

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

Thank you for your time.

cmc89
  • 11
  • 2
  • Hi and Welcome to SO. Indeed you should post the code directlyh ere as minimal reproduciable code snippet (ctrl + m). With a priority to "minimal". The reasons for that is, that this question would hold no further value to the community if the link changes/deleted or the issue within the codepen fixed. – tacoshy Mar 06 '21 at 17:06
  • Post the code in the question as a [mcve] – Alon Eitan Mar 06 '21 at 17:07
  • The code is working fine, there must be some caching issue. If you want to force the white background color than you can use @media (max-width: 1028px) .navbar-links.active {background: #fff !important;} in the css. – Ujjawal Poonia Mar 06 '21 at 17:13
  • Thank you everyone. In future I will adhere to making sure any future posts are clear and concise. I have applied the code and it is back to the white background. I've never come across the !important rule before. Time to give my brain a break. Cheers everyone. – cmc89 Mar 06 '21 at 17:41

0 Answers0