Casa > H > How To Apply A Gradient Color On My Navbar Through Materialize Css

How to apply a gradient color on my navbar through materialize CSS

In Material Design, each color is defined with a base color and then options to lighten or darken the color.

So there is no way you can apply gradient color on the navbar component in Materialize CSS, you will need a separate CSS file to do that or may be use inline CSS rules.

For example

Step 1: Add materialize.css to your web page.

You can use the following to add materialize css to the webpage.

  1.  

Step 2: Add CSS to you materialize component.

Now, you can use the materialize css rules change the look and feel of your components such as navbar.

For example , if I have a navbar component

  1.  
  2.  
  3.  
  4.  
    •  
  5. Link-1 
  6. Link-2 
  7. Link-3 
  8.  
  9.  
  10.  
  11.  

The result should look like the following.

main-qimg-56a5a6fd7b49415f2d30a76bdd8c13c3

Step 3: Add custom CSS rule for gradient

Now you can add custom rules for gradient color for your navigation bar.

  1. .nav-wrapper { 
  2. background: linear-gradient(to right, red , yellow); 
  3.  

I have used inline css rules, but you can add it to the materialize.css file if required.

The result is a navigation bar with gradient color.

main-qimg-642df6bcd049d3d404d80911b040e209

De Tildy

Qual é a finalidade da porta USB na nova Apple TV? :: Como obter dinheiro gratuito em Paytm