broke top bar into two sections

public/assets/css/BEM.css

@@ -157,8 +157,31 @@ footer {
 
 /* TOP BAR */
 
+/* blocks */
 .nav-bar {
+
+}
+
+.nav-bar-title-section, .nav-bar-link-section {
+	padding: 0px 1em 0px 1em;
+}
+
+.nav-bar-title-section {
+	overflow: hidden;
 	border-bottom: 2px solid #eaeaea;
+	position: relative;
+	z-index: 2;
+}
+
+.nav-bar-link-section {
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+}
+
+/* elements */
+.nav-bar-title, .nav-bar-link {
+	padding: 1.5rem 0.5rem 1.5rem 0.5rem;
 }
 
 .nav-bar-logo, .nav-bar-title, .nav-bar-link {
@@ -176,8 +199,14 @@ footer {
 }
 
 .nav-bar-link {
-	padding: 1em 0.5em 1em 0.5em;
+	border-bottom: 1px solid #eaeaea;
 }
+.nav-bar-link:hover {
+	background-color: yellow;
+	border-bottom: 1px solid blue;
+}
+
+
 
 /* LINKS */
 

views/partials/topBar.handlebars

@@ -1,8 +1,7 @@
-<div class="row nav-bar">
+<div class="row-wide nav-bar">
-    <div class="column column--3 align-content-left">
+    <div class="nav-bar-title-section">
         <a href="/"><span class="nav-bar-title">Spee.ch</span></a><span class="nav-bar-title nav-bar-title--superscript">(beta)</span>
-    </div><div class="column column--7 align-content-right">
+        <div class="nav-bar-link-section">
-        <a class="nav-bar-link" href="/popular">popular</a>
             <a class="nav-bar-link" href="https://github.com/lbryio/spee.ch" target="_blank">source</a>
             <a class="nav-bar-link" href="/about">about</a>
             {{#if user}}
@@ -17,6 +16,9 @@
         </div>
     </div>
 
+
+</div>
+
 <script type="text/javascript">
     function toggleLogin (event) {
         console.log(event);