Minimal but raw code modifications to support header menu

Stuart98 · Jul 22, 2015 · 8eb4297 · 8eb4297
1 parent 6c09e98
commit 8eb4297
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 1 deletion.
diff --git a/source/images/logo-no-header.png b/source/images/logo-no-header.png
diff --git a/source/images/logo.png b/source/images/logo.png
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
@@ -47,8 +47,17 @@ under the License.
         <%= image_tag('navbar.png') %>
       </span>
     </a>
+    <div class="rc-dpw-nav">
+      <div class="logo"><%= image_tag "logo.png" %></div>
+      <ul class="menus">
+        <li><a href="">OVERVIEW</a></li>
+        <li class="active"><a class="menu-link" href="">API & DOCS</a></li>
+        <li><a href="">SUPPORT & FAQS</a></li>
+        <li><a href="">APP GALLERY</a></li>
+        <li><a href="">BLOG</a></li>
+      </ul>
+    </div>
     <div class="tocify-wrapper">
-      <%= image_tag "logo.png" %>
       <% if language_tabs %>
         <div class="lang-selector">
           <% language_tabs.each do |lang| %>

diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
@@ -625,3 +625,73 @@ html, body {
     margin-top: $main-padding;
   }
 }
+
+.rc-dpw-nav {
+  position: fixed;
+  top: 0;
+  height: 125px;
+  width: 100%;
+  background-color: white;
+  z-index: 100;
+  .logo {
+    line-height: 62px;
+    height: 62px;
+    border-bottom: 1px solid #dcdcdc;
+  }
+  .menus {
+    line-height: 62px;
+    height: 62px;
+    border-bottom: 1px solid #dcdcdc;
+    margin: 0;
+    padding: 0;
+    li {
+      font-size: 1.2em;
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+      margin-left: 20px;
+      a {
+        color: #585858;
+        text-decoration: none;
+      }
+    }
+    li.active .menu-link {
+      color: #0073ae;
+      font-weight: bold;
+    }
+    li.active .menu-link:before, li.active .menu-link:after {
+      bottom: -1px;
+      left: 165px;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+    li.active .menu-link:before {
+      border-color: rgba(194,225,245,0);
+      border-bottom-color: #cdcdcd;
+      border-width: 8px;
+      margin-left: -8px;
+    }
+    li.active .menu-link:after {
+      border-color: rgba(136,183,213,0);
+      border-bottom-color: #f9f9f9;
+      border-width: 7px;
+      margin-left: -7px;
+    }
+  }
+}
+
+.tocify-wrapper {
+  top: 125px;
+}
+
+.page-wrapper {
+  padding-top: 125px;
+}
+
+.page-wrapper .lang-selector {
+  top: 125px;
+}