How to show nav links after clicking on menu icon when browser is resized

[DaceyForward]

Describe the bug A clear and concise description of what the bug is. I found a way in materialize to show the three-line menu icon when the browser is smaller, but I can't figure out how to then render and access those nav links

What is the problem you are trying to solve? Nav links disappear after browser is resized, but menu icon appears and doesn't go anywhere

Expected behavior A clear and concise description of what you expected to happen. I want the menu icon to show the nav links when clicked on if the browser is smaller

What is the actual behavior? A clear and concise description of what actually happened. If you resize the browser, the menu icon appears, but does not allow for clicking on links

Post any code you think might be relevant (one fenced block per file)

  <header class="navbar-fixed">
    <nav>
      <div class="nav-wrapper">
        <ul>
          <li><a href="/" class="left brand-logo">&nbsp;&nbsp;<span id="logo">Birthday </span><span id="blaster">Blaster</span></a></li>
          <a href="" data-target="mobile-demo" class="sidenav-trigger right"><i class="large material-icons">menu</i></a>
        </ul>
        <ul class="right hide-on-med-and-down">
          <li><a href="{% url 'about' %}" id="navlist">About</a></li>
          {% if user.is_authenticated %}
            <li><a href="{% url 'birthdays_create' %}" id="navlist">Add A Birthday</a></li>
            <li><a href="{% url 'index' %}" id="navlist">View My Birthdays</a></li>
            <li><a href="{% url 'logout' %}" id="navlist">Log Out</a></li>
          {% else %}
            <li><a href="{% url 'signup' %}" id="navlist">Sign Up</a></li>
            <li><a href="{% url 'login' %}" id="navlist">Log In</a></li>
          {% endif %}
        </ul>
      </div>
    </nav>
    <ul class="sidenav-trigger hide-on-med-and-down" id="mobile-demo">
      <li><a href="{% url 'about' %}" id="navlist"></a></li>
      {% if user.is_authenticated %}
        <li><a href="{% url 'birthdays_create' %}" id="navlist"></a></li>
        <li><a href="{% url 'index' %}" id="navlist"></a></li>
        <li><a href="{% url 'logout' %}" id="navlist"></a></li>
      {% else %}
        <li><a href="{% url 'signup' %}" id="navlist"></a></li>
        <li><a href="{% url 'login' %}" id="navlist"></a></li>
      {% endif %}
    </ul>
  </header>

What is your best guess as to the source of the problem? In materialize, it says to initialize via JavaScript. I'm not sure how to do that in python, if at all possible.

What things have you already tried to solve the problem? Reading docs and trying code in different spots

Additional context Add any other context about the problem here.

Paste a link to your repository here https://github.com/DaceyForward/Pod1-Project-3.git

[DaceyForward]

This is where I found the navbar collapse code

[asands94]

If it's saying to initialize via JavaScript, it may be referring to you needing to add a script tag to the bottom of the file where the navbar is and using JS there. Just like we did with the date picker

[DaceyForward]

Okay, so I did that at the end, but it still isn't working. Do I have the right path for the menu icon?

  <header class="navbar-fixed">
    <nav>
      <div class="nav-wrapper">
        <ul>
          <li><a href="/" class="left brand-logo">&nbsp;&nbsp;<span id="logo">Birthday </span><span id="blaster">Blaster</span></a></li>
          <a href="" data-target="mobile-demo" class="sidenav-trigger right"><i class="large material-icons">menu</i></a>
        </ul>
        <ul class="right hide-on-med-and-down">
          <li><a href="{% url 'about' %}" id="navlist">About</a></li>
          {% if user.is_authenticated %}
            <li><a href="{% url 'birthdays_create' %}" id="navlist">Add A Birthday</a></li>
            <li><a href="{% url 'index' %}" id="navlist">View My Birthdays</a></li>
            <li><a href="{% url 'logout' %}" id="navlist">Log Out</a></li>
          {% else %}
            <li><a href="{% url 'signup' %}" id="navlist">Sign Up</a></li>
            <li><a href="{% url 'login' %}" id="navlist">Log In</a></li>
          {% endif %}
        </ul>
      </div>
    </nav>
    <ul class="sidenav-trigger hide-on-med-and-down" id="mobile-demo">
      <li><a href="{% url 'about' %}" id="navlist"></a></li>
      {% if user.is_authenticated %}
        <li><a href="{% url 'birthdays_create' %}" id="navlist"></a></li>
        <li><a href="{% url 'index' %}" id="navlist"></a></li>
        <li><a href="{% url 'logout' %}" id="navlist"></a></li>
      {% else %}
        <li><a href="{% url 'signup' %}" id="navlist"></a></li>
        <li><a href="{% url 'login' %}" id="navlist"></a></li>
      {% endif %}
    </ul>
  </header>

  <script>
      document.addEventListener('DOMContentLoaded', function() {
         var elems = document.querySelectorAll('.sidenav');
         var instances = M.Sidenav.init(elems, options);
  });
  </script>

[asands94]

When you resize the window and see the icons, can you open up the dev tools and see if it's still a link. Resizing may have removed it

[DaceyForward]

Actually you're right, there is not a link now, it just says href. How can I add a link back? What link would I need to add to access all the other navbar links?

[asands94]

It looks like in your bottom code for the links, you have no content inside the a tags, is that purposeful? Also I don't see that you have a class of sidenav which is what looks like is needed in that bit of JS you have at the bottom.

[DaceyForward]

I had taken the content out because it was rendering on the page in the top left, but then forgot to add them back in.

I just changed the class on the bottom code, which is now showing the nav links in the dev tools in the top corner, but that menu icon still has no link showing in the dev tools.

I noticed that the materialize docs have the menu icon clicking to open a side bar/tab thing..