Change menu to left side

_data/menu.yml

@@ -2,5 +2,5 @@ items:
   "Introduction": "/"
   "Setup": "/setup/"
   "User Guide": "/user-guide/"
-  "Conversion": "/conversion/"
+  "Conversion Matrix": "/conversion/"
   "Architecture": "/architecture/"

_includes/header.html

@@ -1,11 +1,12 @@
 <header>
-  <h1>
-    {{ site.project_name }}
-  </h1>
-  <p>{{ site.description }}</p>
+<h1> {{ site.project_name }}</h1>
+<p>{{ site.description }}</p>
+
   <p class="view"><a href="{{ site.repository_url }}">View the Project on GitHub <small>{{ site.repository_shorthand }}</small></a></p>
   <a class="github-button" href="https://github.com/{{ site.repository_shorthand }}/subscription" data-icon="octicon-eye" data-count-href="/{{ site.repository_shorthand }}/watchers" data-count-api="/repos/{{ site.repository_shorthand }}#subscribers_count" data-count-aria-label="# watchers on GitHub" aria-label="Watch {{ site.repository_shorthand }} on GitHub">Watch</a>
   <a class="github-button" href="https://github.com/{{ site.repository_shorthand }}" data-icon="octicon-star" data-count-href="/{{ site.repository_shorthand }}/stargazers" data-count-api="/repos/{{ site.repository_shorthand }}#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star {{ site.repository_shorthand }} on GitHub">Star</a>
   <a class="github-button" href="https://github.com/{{ site.repository_shorthand }}/fork" data-icon="octicon-repo-forked" data-count-href="/{{ site.repository_shorthand }}/network" data-count-api="/repos/{{ site.repository_shorthand }}#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork {{ site.repository_shorthand }} on GitHub">Fork</a>
 
+  {% include menu.html %}
+
 </header>

_includes/menu.html

@@ -1,8 +1,8 @@
-<div class="menu">
+<div class="menubar">
+  <hr/>
   <ul>
     {% for item in site.data.menu.items %}
     <li><a href="{{ item[1] | prepend: site.baseurl }}">{{ item[0] }}</a></li>
     {% endfor %}
   </ul>
-  <hr/>
 </div>

_layouts/default.html

@@ -10,10 +10,6 @@
 
       <section>
 
-        {% unless page.no_menu %}
-          {% include menu.html %}
-        {% endunless %}
-
         {{ content }}
 
       </section>

css/custom.css

@@ -1,18 +1,24 @@
-.menu {
-    text-align: center;
+.headerstyle {
+  margin: 0;
+}
+
+.menubar {
+    margin-top:10px;
+    text-align: left;
     z-index: 1000;
     margin-bottom: 10px;
 }
 
-.menu ul {
+.menubar ul {
+    position: static !important;
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
-.menu ul li {
-    display: inline-block;
-    padding: 10px;
+.menubar ul li {
+    padding: 0 0 10 0;
     background: #fff;
     margin: 2px;
+    width:100%;
 }

css/styles.css

@@ -111,64 +111,6 @@ header {
   -webkit-font-smoothing:subpixel-antialiased;
 }
 
-header ul {
-  list-style:none;
-  height:40px;
-  padding:0;
-  background: #f4f4f4;
-  border-radius:5px;
-  border:1px solid #e0e0e0;
-  width:270px;
-}
-
-header li {
-  width:89px;
-  float:left;
-  border-right:1px solid #e0e0e0;
-  height:40px;
-}
-
-header li:first-child a {
-  border-radius:5px 0 0 5px;
-}
-
-header li:last-child a {
-  border-radius:0 5px 5px 0;
-}
-
-header ul a {
-  line-height:1;
-  font-size:11px;
-  color:#999;
-  display:block;
-  text-align:center;
-  padding-top:6px;
-  height:34px;
-}
-
-header ul a:hover {
-  color:#999;
-}
-
-header ul a:active {
-  background-color:#f0f0f0;
-}
-
-strong {
-  color:#222;
-  font-weight:500;
-}
-
-header ul li + li + li {
-  border-right:none;
-  width:89px;
-}
-
-header ul a strong {
-  font-size:14px;
-  display:block;
-  color:#222;
-}
 
 section {
   width:500px;
@@ -215,7 +157,7 @@ footer {
   section {
     border:1px solid #e5e5e5;
     border-width:1px 0;
-    padding: 0 0 0 0;
+    padding:20px 0;
     margin:0 0 20px;
   }