Search code examples
jquerymaterialize

Materialize CSS navbar menu dropdown wont go below origin

I am new with MaterializeCSS and jQuery and I for the life of me can't figure out why belowOrigin will not work on this dropdown menu. I am unsure if it has to do with how the menu li is setup, but I have seen examples of dropdown-button working, but none with dropdown-trigger. Any insight or clarity of how to get this working properly will be great. Thanks

HTML: 

<nav class="navbar-fixed">
      <div class="nav-wrapper" id="nav">
         <a href="#" class="brand-logo center">Nav Dropdown Help</a>
         <ul class="left hide-on-med-and-down">
            <li class="active"><a href="#home">Home</a></li>
            <li><a class="dropdown-trigger" data-target="dropdown1" href="#plan">Test<i class="material-icons right">arrow_drop_down</i></a></li>
         </ul>
      </div>
<ul id="dropdown1" class="dropdown-content nested">
         <li><a href="#">one</a></li>
         <li><a href="#">two</a></li>
         <li><a href="#">three</a></li>
      </ul>

Link to a demo pen of how I am doing it https://codepen.io/anon/pen/xJXezp

Solution

  • Use this :

    $(".dropdown-trigger").dropdown({
   coverTrigger: false
});

    Instead of 

    $(".dropdown-trigger").dropdown({
   belowOrigin: true
});