Care on Location Component Library

Topmenu 

<header id="header">
    <section id="toplogin" class="flex-grid">
        <nav>
            <ul>
                <li><a href="">Sign Up</a></li>
                <li><a href="">Log In</a></li>
            </ul>
        </nav>
    </section>

    <section id="topbanner" class="flex-grid">
        <section class="logo">
            <img src="/images/COL_Logo_Full_2ColorBig.png" alt="Care On Location Logo" />
        </section>
        <nav id="main">
            <ul>
                <li class="has-sub-menu"><a href="#">Services</a>
                    <ul class="sub-menu">

                        <li><a href="#">Video Care Consult</a></li>

                        <li><a href="#">Assisted Video Care Consult</a></li>

                        <li><a href="#">On Location Care Consult</a></li>

                    </ul>
                </li>
                <li class=""><a href="#">Providers</a>
                </li>
                <li class=""><a href="#">Partners</a>
                </li>
                <li class=""><a href="#">About</a>
                </li>
                <li class=""><a href="#">FAQ</a>
                </li>
                <li class=""><a href="#">News</a>
                </li>
                <li class="nav-more"><a href="#">...</a>
                    <ul class="spillover-nav">

                        <li><a href="#">Services</a></li>

                        <li><a href="#">Providers</a></li>

                        <li><a href="#">Partners</a></li>

                        <li><a href="#">About</a></li>

                        <li><a href="#">FAQ</a></li>

                        <li><a href="#">News</a></li>

                    </ul>

                </li>
            </ul>
        </nav>

    </section>

</header>
<section id="clearheader"></section>
 
<header id="header">
  <section id="toplogin" class="flex-grid">
    <nav>
      <ul>
        <li><a href="{{ signup-url }}">Sign Up</a></li>
        <li><a href="{{ login-url }}">Log In</a></li>
      </ul>
    </nav>
  </section>

  <section id="topbanner" class="flex-grid">
    <section class="logo">
      <img src="{{ main-logo }}" alt="Care On Location Logo" />
    </section>
    <nav id="main">
      <ul>
        {{#each nav-items}}
          <li class="{{ classes }}"><a href="{{ nav-item-link }}">{{ nav-item-title }}</a>
          {{#if sub-nav-items}}
            <ul class="sub-menu">

            {{#each sub-nav-items}}
              <li><a href="{{ nav-item-link }}">{{ nav-item-title }}</a></li>

            {{/each}}

            </ul>
          {{/if}}
        </li>
        {{/each}}
          <li class="nav-more"><a href="#">...</a>
            <ul class="spillover-nav">
              {{#each nav-items}}
                
                  <li><a href="{{ nav-item-link }}">{{ nav-item-title }}</a></li>

              {{/each}}
            </ul>

          </li>
      </ul>
    </nav>

  </section>

</header>
<section id="clearheader"></section>

{
  "main-logo": "/images/COL_Logo_Full_2ColorBig.png",
  "nav-items": [
    {
      "nav-item-link": "#",
      "nav-item-title": "Services",
      "classes": "has-sub-menu",
      "sub-nav-items": [
        {
          "nav-item-link": "#",
          "nav-item-title": "Video Care Consult"
        },
        {
          "nav-item-link": "#",
          "nav-item-title": "Assisted Video Care Consult"
        },
        {
          "nav-item-link": "#",
          "nav-item-title": "On Location Care Consult"
        }
      ]
    },
    {
      "nav-item-link": "#",
      "nav-item-title": "Providers"
    },
    {
      "nav-item-link": "#",
      "nav-item-title": "Partners"
    },
    {
      "nav-item-link": "#",
      "nav-item-title": "About"
    },
    {
      "nav-item-link": "#",
      "nav-item-title": "FAQ"
    },
    {
      "nav-item-link": "#",
      "nav-item-title": "News"
    }
  ],
  "site-title": "Care on Location",
  "year": 2017,
  "org-address": "111 N. 1st St. <br /> Denver, CO 80204",
  "org-phone": "303-111-1111",
  "socials": [
    {
      "social": "facebook",
      "social-url": "https://www.facebook.com"
    },
    {
      "social": "twitter",
      "social-url": "https://www.twitter.com"
    },
    {
      "social": "google-plus",
      "social-url": "https://plus.google.com"
    }
  ]
}
  • Content: 
    #header {
  &.fixed-ready {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

  }

  &.sticky {


    //zoom: 9999;
    background: rgba(255, 255, 255, 0.95);


    #topbanner .logo {
      max-width: 150px;
    }
  }

  #topbanner {
    //  transition: all 0.4s ease;
    .logo  {
      transition: all 0.4s ease;
      img {

      }

    }
  }

}

#toplogin {
  width: 100%;
  background-color: $brand-lightblue;

  padding: 5px 30px;
  nav {

    text-align: right;
    li {
      display: inline;
      list-style: none;
      margin: 0 10px;

    }
    a {
      color: $brand-lightgrey;
      color: $brand-white;
      text-decoration: none;
      @include font-size(20);
      font-weight: bold;
      &:hover {
        color: lighten($brand-darkgrey, 30%);
        color: $brand-lightgrey;
        text-decoration: underline;
      }
    }
  }
}
#topbanner {
  justify-content: space-between;
  padding: 10px 30px 10px 30px;
  border-bottom: 5px solid $brand-orange;
  @media (max-width: 600px) {
    flex-direction: column;
    justify-content: center;


  }
  .logo {
    min-width: 160px;
    max-width: 250px;
    margin: auto;
  }
  nav {
    flex: 3;
    text-align: right;
    align-self: end;

    li {
      display: inline;
      list-style: none;
      margin: 0 10px;
      &.nav-more {
        display: none;
      }
      &.has-sub-menu {
        position: relative;
        ul {
          margin-top: 0;
          padding-left: 0;
          min-width: 200px;
          text-align: left;

          a {
            @include font-size(16);
          }
        }
        li {
          border-top: 1px solid $brand-darkblue;
          padding: 10px 1px;
          &:first-of-type {
            border-top: none;
          }
        }
        &::after {
          font-family: 'FontAwesome';
          content: "\f107";
          display: inline-block;
          padding-left: 3px;
          color: $brand-darkblue;

        }
        &:hover .sub-menu {
          opacity: 1 !important;
          left: 0;

        }

      }
    }
    a {
      text-decoration: none;
      color: $brand-darkblue;
      @include font-size(20);
      font-weight: bold;

      &:hover {
        text-decoration: underline;
        color: $brand-lightblue;


      }
    }

    .spillover-nav {
      display: none;
      position: absolute;
      right: 0;
      background-color: $brand-white;g
      li {
        display: none;
        &:nth-of-type(1n+4) {display: inline-block;}
      }
    }


    .sub-menu {
      opacity: 0;

      position: absolute;
      z-index: 100;
      background-color: white;
      border: 1px solid $brand-darkblue;
      left: 0;
      left: -9000px;
      transition: opacity .5s;


      ul {
        margin-top: 0;
      }
      li {
        display: block;

      }
    }

    @media (max-width: 850px) {
      li {
        &:nth-of-type(1n+4) {display: none;}
        &.nav-more {
          display: inline;
          li {
            display: none;
            &:nth-of-type(1n+4) {
              display: inline;
            }
          }
        }
      }

    }
    @media (max-width: 600px) {
      flex: 1;
      text-align: center;
      align-self: center;
      ul {
        padding-left: 0;
      }
      a {
        @include font-size(16);
      }
    }
  }




}
  • URL: /components/raw/topmenu/_topmenu.scss
  • Filesystem Path: src/components/03-layouts/topmenu/_topmenu.scss
  • Size: 3.3 KB

There are no notes for this item.