How to make parent link clickable in metisMenu

Question

I am trying to change the default behavior of metisMenu so that if parent menu has a link then it open the link if user click on the link otherwise it show open sub menu if user clicks on the <.

metisMenu works fine for me but i noticed that i have also link associated with parent menu which should be clickable, by default it is not possible.

For example in this example Category menu has sub menu items also. what i am trying to odo is if user click on the Category part then it should goto that page link or if users clicks on < then it should show the menu.

I looks for document ion but could not find much about this. is there a way we can do this in metisMenu https://github.com/onokumus/metisMenu

Code pen example https://codepen.io/anon/pen/zjWodW

<ul class="metismenu" id="menu">
  <li><a href="index.html">HOME</a></li>
  <li><a href="">ABOUT US</a></li>
  <li><a href="htt://google.com">CATEGORY<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li><a href="#">Politics </a></li>
      <li><a href="#">Feature </a></li>
      <li><a href="#">Entertainment </a></li>
      <li><a href="#">Business </a></li>
      <li><a href="#">Region</a></li>
      <li><a href="#">Media</a></li>
    </ul>
 <!-- /.nav-second-level -->
  </li>
  <li><a href="">Contact US</a></li>
  <li><a href="">Menu something</a></li>
</ul>

Answer 1

Quick and dirty fix is to create another span element and place link inside it. You are therefore hiding <a href> from <li> that metisMenu would treat as a dropdown.

<ul class="metismenu" id="menu">
<li><a href="index.html">HOME</a></li>
<li><a href="">ABOUT US</a></li>
<li><a href="">
  <span class="fa arrow"></span>
    </a>
  <span>
    <a href="http://google.com" target="_blank">CATEGORY</a>
  </span>
<ul class="nav nav-second-level">
<li><a href="#">Politics </a></li>
<li><a href="#">Feature </a></li>
<li><a href="#">Entertainment </a></li>
<li><a href="#">Business </a></li>
<li><a href="#">Region</a></li>
<li><a href="#">Media</a></li>
</ul>
<!-- /.nav-second-level -->
</li>
  <li><a href="">Contact US</a></li>
  <li><a href="">Menu something</a></li>
</ul>

See codepen: https://codepen.io/anon/pen/PeRWXO

Answer 2

wrapping the <span></span> around your parent A tag (like lovemyjob recommended) does work.

I'm running it on latest version and it solved my problem. Be sure to keep its children expanded automatically so they are always showing, you will lose the collapse functionality the parent A tag offers when wrapping it in a span.