How to customize materialize css?

Asked

Viewed 788 times

1

I am beginner in materialize. I have a Nav bar, in which the color of the link is Gray. I want to edit the Hover so that by hovering the mouse over only change the color of the link to blue, can help me pfv???

This is my Nav bar

 <nav class="white" style="padding:0px 10px;">
    <div class="nav-wrapper ">
      <a href="#" class="brand-logo indigo-text text-darken-4">MATTAR</a>

      <a href="#" class="sidenav-trigger" data-target ="mobile-nav">
        <i class="material-icons indigo-text text-darken-4">menu</i>
      </a>

      <ul class="right hide-on-med-and-down">
        <li><a href="#" class=" grey-text text-darken-1">HOME</a></li>
        <li><a href="#" class=" grey-text text-darken-1">SERVICES</a></li>
        <li><a href="#" class=" grey-text text-darken-1">ABOUT</a></li>
        <li><a href="#" class=" grey-text text-darken-1">CONTACT</a></li>
      </ul>
    </div>
  </nav>

html css materialize

  • I created a codiggo to customize Hover, but it’s empty. tried: an a:Hover{ color:red;} but it didn’t work

1 answer

0


Matthew what happens is that you are using two color classes of Materialize in your tag <a> and those colour classes grey-text and text-darken-1 of Materialize have by default !important on the property color, with that even putting a:hover{ color:red;} the color will not be applied. I suggest you read here: Which css selector has priority?

See this image to understand better.

inserir a descrição da imagem aqui

Hint to apply the color

One of the options is to put !important also in the style you will do to apply the new color. For example as I did in the code below.

.texto-red:hover{ color:red !important }

Perform in "Whole page" to see the full menu and links

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  
  .texto-red:hover{ color:red !important }
  
</style>
</head>
<body>
  
  <nav class="white" style="padding:0px 10px;">
    <div class="nav-wrapper ">
      <a href="#" class="brand-logo indigo-text text-darken-4">MATTAR</a>

      <a href="#" class="sidenav-trigger" data-target ="mobile-nav">
        <i class="material-icons indigo-text text-darken-4">menu</i>
      </a>

      <ul class="right hide-on-med-and-down">
        <li><a href="#" class=" grey-text text-darken-1 texto-red">HOME</a></li>
        <li><a href="#" class=" grey-text text-darken-1 texto-red">SERVICES</a></li>
        <li><a href="#" class=" grey-text text-darken-1 texto-red">ABOUT</a></li>
        <li><a href="#" class=" grey-text text-darken-1 texto-red">CONTACT</a></li>
      </ul>
    </div>
  </nav>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>

  • Helped a lot!!!!!! Thanks a lot Hugo, I’m new in the area and in the forum, how can I thank you?

  • @I’m glad I could help. Actually I don’t need to "thank you", the site here eh a site of questions and answers, not well a forum Pq eh not for conversations and chat, eh more question and even answer. I saw that you accepted the answer, that is the main thing to do, since your doubt has been resolved. Thus the question does not remain open without accepted answer even having already been solved. In the most success and good studies ;)

Browser other questions tagged html css materialize

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