title: How to update CSS based on click button in javascript
body: <p>I am building a simple website with bootstrap5 (no JS for now).
  When I minimize the screen to have the nav bar become a burger button, I want that whenever I click on it and the menu shows up, the margin-top of the element below to augment so that the menu isn't written on top of it.</p>
  <p>I think there is a way to do that in JS but I've tried a few methods that didn't work.</p>
  <p>Here an excerpt of my code:</p>
  <pre><code>&lt;nav class=&quot;navbar navbar2 navbar-expand-lg navbar-light bg-white&quot;&gt;
  &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;button class=&quot;navbar-toggler&quot; id=&quot;button-burger&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
        &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
      &lt;ul class=&quot;navbar-nav navbar-center2&quot;&gt;
  .........
  .........
  .........
  .........
  &lt;/nav&gt;
  
  &lt;div class=&quot;container-fluid nav-wrapper&quot; id=&quot;container-below-header&quot;&gt;
  </code></pre>
  <p>Basically I want to change the class of the div below to change whenever I click on the button.
  Thanks for your help !</p>