nav bar updated

Author: Chris Hurlburt

examples/src/components/Navigation.vue

@@ -1,14 +1,13 @@
 <template>
  <nav class="main-navigation">
+ <p class="docs"><a :href="`${path}#/`">ScrollView Examples</a></p>
  <ul class="nav-list">
- <li class="nav-item"><a :href="`${path}#/`">Home</a></li>
  <li class="nav-item"><a :href="`${path}#/lazy-load`">Lazy Loading</a></li>
  <li class="nav-item"><a :href="`${path}#/infinite-scroll`">Infinite Scroll</a></li>
  <li class="nav-item"><a :href="`${path}#/scrollspy`">Scrollspy Navigation</a></li>
  <li class="nav-item"><a :href="`${path}#/animation`">Animation</a></li>
  <li class="nav-item"><a :href="`${path}#/scroll-markers`">Scroll Markers</a></li>
  </ul>
- <p class="menu">Menu</p>
  </nav>
 </template>
 
@@ -26,41 +25,33 @@ export default {
 .main-navigation {
  position: fixed;
  top: 0;
- right: 0;
+ left: 0;
+ width: 100%;
+ background:#798890;
  display: flex;
  align-items: center;
- justify-content: center;
- padding: 15px 40px;
+ justify-content: space-around;
  z-index: 99;
+ height: 50px;
 }
 
-.main-navigation:hover .nav-list {
- opacity: 1;
- transform: translateY(0);
-}
-
-.nav-list {
- transition: all .2s ease-in-out;
- transform: translateY(-100%);
- opacity: 0;
+.docs a {
+ font-weight: bold;
+ color: #fff;
+ text-decoration: none;
 }
 
 .nav-item {
  display: inline-block;
  margin: 0 15px;
 }
 
-.menu {
- cursor: pointer;
- border: 1px solid #000;
- padding: 10px 20px;
- margin-left: 15px;
- transition: all .2s ease-in-out;
-}
-
-.menu:hover {
- background: #000;
+.nav-item a {
  color: #fff;
+ text-decoration: none;
 }
 
+.nav-item a:hover {
+ text-decoration: underline;
+}
 </style>

examples/src/components/pages/Home.vue

@@ -7,7 +7,7 @@
  <a href="https://github.com/chrishurlburt/vue-scrollview" target="blank">here</a>.
  </p>
  <p class="description">
- <a href="https://chrishurlburt.gitbooks.io/vue-scrollview/" target="blank">Read the docs here</a>
+ <a href="https://chrishurlburt.gitbooks.io/vue-scrollview/" target="blank">Read the docs</a>
  </p>
  </section>
 </template>
@@ -30,6 +30,10 @@ export default {
  justify-content: center;
 }
 
+.home a {
+ color: #798890;
+}
+
 .title {
  margin-bottom: 35px;
 }