Skip to content

Instantly share code, notes, and snippets.

@ADTC

ADTC/navbar.html

Created November 26, 2017 00:14
Download ZIP

Revisions

  1. ADTC created this gist Nov 26, 2017.
    33 changes: 33 additions & 0 deletions navbar.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    <div class="navbar has-shadow">
    <div class="container">
    <div class="navbar-brand">
    <a class="navbar-item">MyCompany</a>

    <span class="navbar-burger" v-on:click="toggleNav" v-bind:class="{ 'is-active': isActive }">
    <span></span>
    <span></span>
    <span></span>
    </span>
    </div>

    <div class="navbar-end navbar-menu" v-bind:class="{ 'is-active': isActive }">

    <router-link to="/" class="navbar-item r-item">Home</router-link>
    <router-link to="faq" class="navbar-item r-item">Features</router-link>
    <router-link to="faq" class="navbar-item r-item">About</router-link>
    <router-link to="faq" class="navbar-item r-item">FAQ</router-link>

    <div class="navbar-item">
    <p class="control">
    <a class="button is-primary is-outlined">
    <span class="icon">
    <i class="fa fa-download"></i>
    </span>
    <span>Join Now</span>
    </a>
    </p>
    </div>

    </div>
    </div>
    </div>
    22 changes: 22 additions & 0 deletions navbar.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    .navbar
    background-color: #383838
    a:hover
    color: gray

    .navbar-brand a
    color: #fff
    font-weight: bold

    a.r-item
    color:#C1C1C1
    padding: 0.5rem 1.75rem
    +mobile
    color: gray
    &:hover
    background-color: #F1F1F1

    .navbar-burger
    &:hover
    background-color: #F1F1F1
    span
    background-color: #C1C1C1