7

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

0

2 Answers 2

12

Use this :

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

Instead of

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

Note for those using Materialize 0.100.2

There is no coverTrigger option. Use belowOrigin: true.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.