title: Cannot make a condition to test a CSS style
body: <p>I am trying to make a condition to test an elements style attributes to position an element on or off the screen when the menu button is clicked. However, JavaScript will not detect the style. Here is my code:</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-js lang-js prettyprint-override"><code>const menu = document.getElementById('menu')
  menu.addEventListener("click", function() {
    let nav = document.getElementById('navHolder');
    if (nav.style.right == `30rem`) {
      console.log('true')
    } else {
      console.log('false');
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#navHolder {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: 99;
    padding-bottom: 10vh;
    position: absolute;
    right: 30rem;
  }
  
  #navBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: rgb(56, 55, 55);
    width: 95vw;
    min-height: 100vh;
    z-index: 98;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id='navBar'&gt;
    &lt;button id='menu'&gt;
      &lt;div id='menuText'&gt;MENU&lt;/div&gt;
    &lt;/button&gt;
  &lt;/nav&gt;
  &lt;div id="navHolder"&gt;
    &lt;div id='navBox'&gt;
      &lt;div class="navList" id="closeBox"&gt;X&lt;/div&gt;
      &lt;div class="navList" id="back"&gt;CLOSE&lt;/div&gt;
      &lt;div class="navList" id="home"&gt;HOME&lt;/div&gt;
      &lt;div class="navList" id="weightLoss"&gt;1&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>