1

Tenho uma navbar e os links nela, só funcionam se eu clicar onde fica o padding deles. Alguém sabe a causa, e se possível, uma solução para o problema?

PS: Uso o 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>
1
  • experimenta adicionar um display:block; externo a ver o que acontece.
    – Edilson
    25/03/2017 às 20:36

2 Respostas 2

0

Pode ser algo relacionado ao seu código css. Uma possibilidade é que a imagem dos ícones que está utilizando na sua navbar estão "sobrepondo" o lugar onde os links funcionariam. Não sei se colocou tais imagens como background. Caso não tenha, vale a pena tentar. E caso não resolva, facilitaria colocar o código css tbm =)

3
  • As imagens são "material-icons" então não acho q dê pra colocar em background. E os links são os icones. E o css, está dentro do materialize, q é um arquivo consideravelmente grande.
    – Samuel
    25/03/2017 às 16:43
  • Tenta assim jsfiddle.net/3L40bvyt 25/03/2017 às 19:15
  • Não funcionou desse jeito. Todos os ícones juntaram num único canto. Eu consegui fazer com que funcionasse, tirando uma classe que estava por engano. Porém, o dropdown ainda não funciona. (O botão do dropdown é o que está marcado na imagem). Nele, ainda é necessário clicar no espaço do padding.
    – Samuel
    25/03/2017 às 20:13
0

Você pode tentar colocar cada tag <a> por fora da tag <li>, assim:

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

Apesar de não ser considerado o ideal (o mais elegante seria manter o HTML da forma que está e consertar o css), pode ser que funcione para seu caso pois vai forçar com que o link ocupe todo o espaço do li.

Obs: Não conheço o materialize

2
  • Não deu certo :( Acho q não tem como. Porque na própria documentação, não tem como abrir o menu clicando no icone, só no texto. Veja: materializecss.com/navbar.html#navbar-dropdown
    – Samuel
    25/03/2017 às 21:25
  • Verdade, este é o funcionamento padrão no materialize, é péssimo para a UX pois justamente na ícone de seta para baixo o clique não funciona ;/ 25/03/2017 às 21:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .