Materialize CSS coverTrigger attribute is not working

Question

I want to build a web page with materialize css. Therefore, I have a navigation bar at the top of my page. I want to include a language selection dropdown menu. The code I used:

html:

<!-- top navbar -->
<header>
  <nav>
    <div class="nav-wrapper blue darken-3">
      <a href="index.html"><img src="img/logo.png" id="appicon" style="vertical-align: middle; margin-bottom: 15px; margin-left: 10px;" width="50" alt="logo"></a>
      <span class="center-align hide-on-small-only" style="font-size: 25px; margin-left: 10px;">
        Title
      </span>
      <a href="index.html" data-target="sidebar" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="index.html" style="font-size: 18px">Home</a></li>
        <li><a href="statistics.html" style="font-size: 18px">Stats</a></li>
        <li class="active"><a href="tutorials.html" style="font-size: 18px">Tutorials</a></li>
        <li><a href="contact.html" style="font-size: 18px">Contact</a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="dropdownLanguage"><i class="material-icons right">translate</i></a></li>
      </ul>
    </div>
  </nav>
</header>

<!-- Dropdown Structure -->
<ul id="dropdownLanguage" class="dropdown-content">
  <li class="active"><a href="#!">German&emsp;<i class="material-icons right">check</i></a></li>
  <li><a href="tutorials_en.html">English</a></li>
</ul>

jQuery:

(function($){
  $(function(){

    $('.sidenav').sidenav();

    $(document).ready(function(){

      /* Activate dropdown menu */
      $(".dropdown-trigger").dropdown({
        constrainWidth: false,
        // coverTrigger: false
        belowOrigin: true
      });

    });

  }); // end of document ready
})(jQuery);

css:

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

The problem I have is that the dropdown language menu won't open below the trigger. I tried the jQuery options 'belowOrigin' as well as 'coverTrigger'. No matter which of the two I used, the dropdown won't open below the trigger-origin. (Tested in Firefox and Chrome.)

Has anybody an idea, what I can try or what the problem is?

Answer 1

I figured it out now. The dropdown structure needed a character to "find" the position of the trigger. The icon I used wasn't enough. Inserting any text helped. Since I didn't want to have any text I opted for an tiny whitespace ( ).

The line in question now looks like this:

<li><a class="dropdown-trigger" href="#!" data-target="dropdownLanguage1">&hairsp;<i class="material-icons right">translate</i></a></li>

Maybe this helps someone.

Best