Search code examples
jqueryhtmlcssframeworksmaterialize

Materialize Navbar dropdown/sidebar dropdown won't work together


I've got my navbar working fine, with a dropdown menu, and just got my mobile side-bar working fine, however it seems to be an either/or situation with the dropdowns. If I have the dropdown coded in the sidebar, then when the window is fullscreen and the navbar is visible I can't click to make the drop down work. If i take out the code for the dropdown in the sidebar then the navbar works again fine. Can anyone shed any light on how to have them both working? I'm sure I'm missing something really obvious, but I've been trawling the internet all evening and I'm close to tearing my hairout over this. Thanks!

My code is:

    <!-- Dropdown Structure-->
<ul id="dropdown1" class="dropdown-content">
    <li><a href="upperbody.html">Upper Body</a></li>
    <li><a href="lowerbody.html">Lower Body</a></li>
    <li><a href="core.html">Core</a></li>
    <li><a href="conditioning.html">Conditioning</a></li>
    <li class="divider"></li>
</ul>
<nav class="teal">
  <div class="nav-wrapper container">
    <a href="#!" class="brand-logo">Fit4Rugby</a>
    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li class="active"><a href="index.html">Home</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Exercises<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="routines.html">Routines</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        <li><a href="store.html">Store</a></li>
    </ul>
<!--Side Bar Popout-->      
    <ul class="side-nav" id="mobile-demo">
      <li><a href="index.html">Home</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Exercises<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="routines.html">Routines</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        <li><a href="store.html">Store</a></li>
    </ul>
  </div>
</nav>

Solution

  • Managed to get this working in the end, in case anyone stumbles across this on google. Duplicated the dropdown structure and gave it the id dropdown2, then in the mobile sidebar just changed it so data-activates="dropdown2". Seems so simple now I think about it!