Skip to content

Instantly share code, notes, and snippets.

@ADTC
Created November 26, 2017 00:14
Show Gist options
  • Save ADTC/aa0136eae93cec65c3f36af2bc6717e0 to your computer and use it in GitHub Desktop.
Save ADTC/aa0136eae93cec65c3f36af2bc6717e0 to your computer and use it in GitHub Desktop.
Coursetro Vue.js compare tutorial - navbar update (Bulma's nav is deprecated)
<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>
.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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment