Navs | StylizerCSS Modern CSS framework

Introduction

Having easy-to-use navigation is important for any web site.

Example

Code :


<ul class="nav">
  <li class="nav-item">
    <a href="#">Link1</a>
  </li>
  <li class="nav-item active">
    <a href="#">Link2>
     <ul class="nav">
       <li class="nav-item">
        <a class="#">Sub Link</a>
       </li> 
     </ul>
</ul>

SCSS


// -----------------------------------------------------------------------------
// This file contains CSS Nav classes.
// -----------------------------------------------------------------------------
.nav {
  display: flex;
  display: -ms-flexbox;
  -ms-flex-direction: column;
  flex-direction: column;
  list-style: none;
  margin: .2rem 0;
  .nav-item {
    a {
      color: #66758c;
      padding: .2rem .4rem;
      text-decoration: none;
      &:focus, &:hover {
        color: #5755d9;
      }
    }
    &.active > a {
      color: #505c6e;
      font-weight: bold;
      &:focus, &:hover {
        color: #5755d9;
      }
    }
  }
  .nav {
    margin-bottom: .4rem;
    margin-left: .8rem;
  }
}