How to remove the navbar effects from Materialize?

Asked

Viewed 122 times

1

I was developing a site without using Materialize. I decided to import it to use one of its functionalities (Cards). In doing so, the navbar, which already had its own well-defined characteristics, became 'corrupted' with the default effects of the materialize navbar (which are instantiated automatically when using the tag <nav>.

How to remove such effects without breaking the other functionalities of materialize?

For example only: Before importing the materialize was like this:

After importing the Materialize:

html css front-end materialize

  • I needed a [MCVE] to answer for sure, as it may be the case to only use the auxiliary class .browser-default in his navbar or apply the class .no-autoinit to skip the element initialization.

  • I made all my navbar styling code using only html + css, there is no specific detail about it. Just think of a stylized Nav bar with any effect, and that such effect was superimposed by materialize characteristics. Please tell me how to use this class . browser-default. I read about it, but I didn’t quite understand how to apply it.

  • In the class attribute of the element: class="browser-default"

1 answer

1


You can bypass the styles application of this framework by assigning the class browser-default for the element that wants to revert to its original state and then assign a class to that element where all styles will be reset for that element and its descendants using the shortcut property all passing the value initial.

PS: Since you didn’t present your code I had to improvise by modifying this example.

window.onload = function() {
  M.AutoInit(); //inicializa o framework
};
/* Reseta todas as propriedades da classe nv2*/

.nv2 {
  all: initial;
}


/* Reseta todas as propriedades dos descendente de nv2*/

.nv2 * {
  all: initial;
}
<!DOCTYPE html>
<html>

<head>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection">

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

  <h4>The nav element</h4>

  <p>The nav element defines a set of navigation links:</p>

  <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
  </nav>

  <!-- Esse nav(nv2) não será estilizado-->
  <nav class="nv2 browser-default">
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
  </nav>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>

</html>

  • That’s exactly what it was! Thank you, Augusto.

  • 1

    If you had put the code in the question it would be easier to find out what you wanted. Next put a [mcve] to help who will help you.

  • 2

    Certainly! It was my first question here in the SO, next time I will be much clearer in what I want. Anyway, thank you!

Browser other questions tagged html css front-end materialize

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