Click link works only in HTML / CSS padding


I have a navbar and the links in it, only work if I click where the padding of them. Does anyone know the cause, and if possible, a solution to the problem?


<ulclass="right hide-on-med-and-down">
    <li><a href="perto_de_mim.php" class="black-text tooltipped" data-tooltip="O que há perto de mim?"><i class="material-icons">room</i></a></li>
    <li><a href="paginadebusca.php" class="black-text tooltipped" data-tooltip="Melhores ofertas no momento"><i class="material-icons">whatshot</i></a></li>
    <li><a href="#" class="black-text dropdown-button tooltipped" data-tooltip="Menu" data-activates="dropdown1"><i class="material-icons">view_headline</i></a></li>
    <li><a href="index.php" class="black-text tooltipped" data-position="left" data-tooltip="Home"><i class="material-icons" >home</i></a></li>
asked by anonymous 25.03.2017 / 17:30

2 answers


It may be something related to your css code. One possibility is that the image of the icons you are using in your navbar are "overlapping" where the links would work. I do not know if you put such images as background. If it does not, it's worth trying. And if it does not solve, it would be easy to put the css code tbm =)

25.03.2017 / 17:41

You can try to put each <a> tag out of the <li> tag, like this:

<a href="#" class="black-text dropdown-button tooltipped" data-tooltip="Menu" data-activates="dropdown1"><li><i class="material-icons">view_headline</i></li></a>

Although not considered ideal (the most elegant would be to keep the HTML in the way it is and fix the css), it might work for your case because it will force the link to occupy all of the li space

Note: I do not know materialize

25.03.2017 / 21:28