Click link works only in HTML/CSS padding

Asked

Viewed 93 times

1

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

PS: Use the materialize.

<ul class="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>
</ul>
html css link padding

  • try adding a display:block; outside to see what happens.

2 answers

0

It could be something related to your css code. One possibility is that the image of the icons you are using in your navbar is "superimposing" the place where the links would work. I don’t know if you put such images as background. If you don’t have it, it’s worth a try. And if you don’t, it would make it easier to put the css code tbm =)

  • The images are "material-icons" so I don’t think you can put them in the background. And the links are the icons. And the css, is inside the materialize, q is a considerably large file.

  • Try thus https://jsfiddle.net/3L40bvyt/

  • It didn’t work that way. All the icons came together in a single corner. I was able to make it work, apart from a class that was by mistake. However, the dropdown still doesn’t work. (The dropdown button is the one marked in the image). In it, you still need to click on the padding space.

0

You can try putting each tag <a> outside the tag <li>, thus:

<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 it is not considered ideal (the most elegant would be to keep the HTML the way it is and fix the css), it might work for your case because it will force the link to occupy all the space of li.

Note: I do not know the materialize

  • It did not work :( I think q has no way. Because in the documentation itself, there is no way to open the menu by clicking on the icon, only in the text. See: http://materializecss.com/navbar.html#navbar-dropdown

  • True, this is the standard operation on materialize, is bad for the UX because precisely in the arrow down icon the click does not work ;/

Browser other questions tagged html css link padding

You are not signed in. Login or sign up in order to post.