1

Ao colocar um ícone de navegação lateral, percebi que um pedaço dele "vazou" para fora do esperado, o que fez ele se comportar de forma visualmente estranha na animação. Coloquei um background-color: red para facilitar a visualização:

área do ícone vazando para fora do desejado

Mas, ao inspecionar o elemento da página, percebi que se eu removesse uma propriedade do CSS da tag <i> ele se comporta da forma desejada:

ícone se comportando da forma desejada propriedade <code>height</code> desmarcada

mas se eu coloco height: 0 no meu CSS a animação ocorre de outra forma estranha, além do elemento, aparentemente, não ter mais "fundo":

ícone se comportando de forma estranha

Como eu posso anular o comportamento de uma única propriedade herdado de tags e classes superiores no CSS sem perder os demais, que podem ser úteis?

Estrutura do DOM:

<body>
    <header class="navbar-fixed">
        <nav class="nav-wrapper">
            <div class="row">
                <div class="left col 2s">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
        </nav>
    </header>


    <!-- conteúdo da página -->
</body>
6
  • Pode colocar um exemplo, com código?
    – Jorge B.
    13/11/2019 às 17:24
  • coloquei a estrutura do DOM, mas não sei o que mais poderia botar pra ajudar 13/11/2019 às 17:32
  • basicamente, o materialize-css tem um CSS pronto para todos os elementos <i> situados de dentro de uma tag <nav>, mas eu quero remover uma das propriedades definidas e usar a padrão da página inteira 13/11/2019 às 17:35
  • 1
    Talvez sobrescrever a classe CSS. Suponha que haja uma classe chamada .a { height: 100px; }, declare em um outro arquivo CSS a mesma classe alterando suas propriedades, ex.: .a { heigth: unset }. O importante é que sua alteração seja carregada depois da classe original. 13/11/2019 às 17:54
  • @MarceloVismari era isso mesmo. Coloca em uma resposta pra eu poder fechar o tópico ;) 13/11/2019 às 18:00

1 Resposta 1

2

Você pode sobrescrever as classes CSS para alterar as propriedades desejadas. Suponha que haja uma classe chamada .a { height: 100px; }, declare em um outro arquivo CSS a mesma classe alterando suas propriedades, ex.: .a { heigth: unset }. O importante é que sua alteração seja carregada depois da classe original.

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 .