rearrange top bar to left align all items but the search

panikweb_templates/static/css/specifics.css

@@ -196,8 +196,8 @@ body{
 /****************************************************/
 
 #metaNav {
-	color:white;
-	background-color: black;
+	color: #e8e8e8;
+	background-color: #3a3a3a;
 	position:fixed;
 	z-index:1000;
 	top:0px;
@@ -206,15 +206,20 @@ body{
 #metaNav ul{
 }
 #metaNav ul li{
+	float: left;
+	padding: 0 1em;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow:hidden;
-	width: 16%;
 }
+
+#metaNav ul li#nav-search {
+	float: right;
+}
+
 #metaNav ul li a{
 	height: 2em;
 	display:block;
-	color:white;
 }
 
 #metaNav ul li a span{
@@ -229,10 +234,13 @@ body{
     opacity:0.8;
 }
 #metaNav ul li.active, #metaNav ul li.active a{
-	background:#0000ff !important;
-    color:#ffffff;
-	font-weight:normal;
+	color: white;
 }
+
+#metaNav ul li.active span.iconLabel {
+	text-decoration: underline;
+}
+
 @media screen and (max-width:600px){
 	#metaNav .iconLabel {display:none;}
 	#metaNav ul li a span.nav-icon { display: inline-block; }

panikweb_templates/templates/includes/metaNav.html

 {% load i18n %}
 <nav class="contextual-menu wrapper">
-		<ul class="distributed">
+		<ul>
 			<li class="{% if sectionName = "Home" %}active{% endif %}"><a href="{% url 'home' %}">
 				<span class="nav-icon icon-home resymbol"></span>
 				<span class="iconLabel">{% trans 'Home' %}</span>
@@ -21,7 +21,7 @@
 				<span class="nav-icon icon-info-sign" ></span>
 				<span class="iconLabel">{% trans 'About' %}</span>
 			</a></li>
-			<li class="{% if sectionName = "Search" %}active{% endif %}"><a href="{% url 'search' %}">
+			<li id="nav-search" class="{% if sectionName = "Search" %}active{% endif %}"><a href="{% url 'search' %}">
 				<span class="nav-icon icon-search resymbol" ></span>
 				<span class="iconLabel">{% trans 'Search' %}</span>
 			</a></li>