Change navigation layout on page resize without having to refresh

Question

My navigation won't show properly when I make the viewport smaller. When I refresh the page, it works. However if I make it big again, my navigation is gone. What am I missing? I tried writing the code another way but I'm not experienced enough.

I would like it to directly show it how it's supposed to be, not that I have to refresh the page when I resize my viewport.

$(document).ready(function() {
  if ($(window).width() < 800) {
    $('.dropdown').hide();
    $('.fa-bars').click(function() {
      $("ul").toggleClass("toggled");
      $('.dropdown').slideToggle();
    })
  }
})

  @media screen and (max-width: 800px) {
  header {
    position: fixed;
    z-index: 1;
    height: auto;
    width: 35vw;
  }
  nav ul {
    flex-direction: column;
    border-radius: 0 0 20px 0;
    width: 230px;
    padding-bottom: 10px;
    margin-left: 70px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <nav>
    <ul>
      <li id="mobileDropdown">
        <a href="index.html" title="Home"><img id="Logo" src="../Images/Logo.svg"></a>
        <i class="fas fa-bars"></i>
      </li>
      <li class="rectangle dropdown"><a href="ueber_mich.html">Über mich</a></li>
      <li class="rectangle dropdown"><a href="aktuell.html">Aktuell</a></li>
      <li id="AktuelleSeite" class="dropdown"><a href="portfolio.html">Portfolio</a></li>
      <li class="rectangle dropdown"><a href="angebot.html">Angebot</a></li>
      <li class="rectangle dropdown"><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </nav>
</header>

`$(document).ready()` will only run once, when the document is ready. You need to add that code in the event handler for the [`resize event`](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event) instead — George, May 01 '19 at 09:30
You need to handle the resize event. See https://stackoverflow.com/questions/9828831/jquery-on-window-resize — Supra, May 01 '19 at 09:31
@George is correct, however it would be a much better idea to use [CSS Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) for this instead, as they perform many times better than JS for changing styling based on window size. — Rory McCrossan, May 01 '19 at 09:32
Did my answer solve your problem ? if so, you're requested to mark the answer as accepted and upvote. thanks — Towkir, May 01 '19 at 14:50

score 0 · Answer 1 · answered May 01 '19 at 10:39

$(window).resize() is what you should use in this case.

Note: I strongly suggest to handle such issues with CSS Media queries.

But if you really have to do it with JS. Have a look at the code sample:

$(document).ready(function() {
  function fixNav() { // wrap your code in a function for later use;
    if ($(window).width() < 800) {
      $('.dropdown').hide();
      $('.fa-bars').click(function() {
        $("ul").toggleClass("toggled");
        $('.dropdown').slideToggle();
      })
    }
  }
  // now call fixNav()
  fixNav();
  $(window).resize(fixNav) // call fixNav() on window resize too
})

Change navigation layout on page resize without having to refresh

1 Answers1