dxw style

Main Nav 

<header role="banner" id="global-header" class="">
    <div class="grid-container">
        <div class="column-full">
            <a id="logo-link" href="/"><img src="../../images/sbc-logo.png" alt="Small Business Commissioner"/></a>
        </div>
    </div>
</header>

<nav role="navigation" id="main-nav" class="main-nav">
    <div class="grid-container">
        <div class="column-full">
            <a href="#" class="active">Home</a>
            <a href="#">Elit Purus</a>
            <a href="#">Tellus</a>
            <a href="#">Justo Vulputate</a>
            <a href="#">Aenean</a>
            <a href="javascript:void(0);" class="icon" onclick="toggleMainNav()">&#9776; <small>Menu</small></a>
        </div>
    </div>
</nav>
 
{% include '@header' %}
<nav role="navigation" id="main-nav" class="main-nav">
  <div class="grid-container">
    <div class="column-full">
      <a href="#" class="active">Home</a>
      <a href="#">Elit Purus</a>
      <a href="#">Tellus</a>
      <a href="#">Justo Vulputate</a>
      <a href="#">Aenean</a>
      <a href="javascript:void(0);" class="icon" onclick="toggleMainNav()">&#9776; <small>Menu</small></a>
    </div>
  </div>
</nav>
 
/* No context defined for this component. */
  • Content: 
    .main-nav {
  background-color: darken($sbc-blue,15);
  overflow: hidden;
}

.main-nav a {
  float: left;
  display: block;
  color: $white;
  text-align: center;
  padding: $gutter / 2;
  text-decoration: none;
  font-size: 17px;
  &.active {
    color: $white;
    background-color: lighten($sbc-blue, 10);
  }

  &:hover,
  &:active,
  &:focus {
    color: $white;
    background-color: lighten($sbc-blue, 10);
  }
}

.main-nav a:hover {
  color: $white;
  background-color: lighten($sbc-blue, 10);
}

.main-nav .icon {
  display: none;
}

@media screen and (max-width: $small-screen) {
  .main-nav a:not(:first-child) {
    display: none;
  }

  .main-nav a.icon {
    float: right;
    display: block;
    color: $white;

    &:hover {
      color: $white;
      background-color: transparent;
    }

    &:hover,
    &:active,
    &:focus {
      color: $white;
      background-color: transparent;
    }
  }
}

@media screen and (max-width: $small-screen) {
  .main-nav.responsive {
    position: relative;
  }

  .main-nav.responsive a.icon {
    position: absolute;
    right: $gutter;
    top: 0;
    &:hover {
      color: $white;
      background-color: transparent;
    }
  }

  .main-nav a {
    &.active {
      color: $white;
      background-color: transparent;
    }
  }

  .main-nav.responsive a {
    float: none;
    display: block;
    text-align: left;
    &.active {
      color: $white;
      background-color: transparent;
    }

    &:hover,
    &:active,
    &:focus {
      color: $white;
      background-color: transparent;
    }
  }
}
  • URL: /components/raw/main-nav/main-nav.scss
  • Filesystem Path: components/main-nav/main-nav.scss
  • Size: 1.6 KB

There are no notes for this item.