Fix main navigation for medium screens

OneGov · Jul 3, 2015 · 4e02b13 · 4e02b13
1 parent 80633a7
commit 4e02b13
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 28 deletions.
diff --git a/onegov/town/templates/macros.pt b/onegov/town/templates/macros.pt
@@ -7,25 +7,28 @@
 <body>
 
 <metal:navigation define-macro="top_navigation">
-    <nav class="top-bar" data-topbar role="navigation" tal:condition="layout.top_navigation">
-        <ul class="title-area">
-            <!--! this section needs to be included (even though it's empty),
-            or the responsive menu bar icon won't be rendered -->
-            <li class="name" style="width: 0;"></li>
-            <li class="toggle-topbar menu-icon">
-                <a href="#"><span>Menu</span></a>
-            </li>
-        </ul>
-        <section class="top-bar-section">
-            <ul class="left">
-                <tal:block repeat="link layout.top_navigation">
-                    <li>
-                        <a tal:attributes="href link.url">${link.text}</a>
-                    </li>
-                </tal:block>
+    <div class="main-navigation">
+        <nav class="top-bar" data-topbar role="navigation" tal:condition="layout.top_navigation">
+            <ul class="title-area">
+                <!--! this section needs to be included (even though it's empty),
+                or the responsive menu bar icon won't be rendered -->
+                <li class="name" style="width: 0;"></li>
+                <li class="toggle-topbar menu-icon">
+                    <a href="#"><span>Menu</span></a>
+                </li>
             </ul>
-        </section>
-    </nav>
+            <section class="top-bar-section">
+                <ul class="left">
+                    <tal:block repeat="link layout.top_navigation">
+                        <li>
+                            <a tal:attributes="href link.url">${link.text}</a>
+                        </li>
+                    </tal:block>
+                </ul>
+            </section>
+        </nav>
+        <div class="clearfix"></div>
+    </div>
 </metal:navigation>
 
 <metal:editbar define-macro="editbar">

diff --git a/onegov/town/theme/styles/town.scss b/onegov/town/theme/styles/town.scss
@@ -75,21 +75,17 @@ footer,
     top navigation
 */
 
-.top-bar {
+.main-navigation {
     margin-bottom: 1rem;
+    background-color: $topbar-bg-color;
+    border-bottom: $top-bar-border-size solid $primary-color;
+}
+
+.top-bar {
 
     &.expanded {
         box-shadow: none;
     }
-
-    ul {
-        margin-bottom: $top-bar-border-size;
-    }
-}
-
-.top-bar,
-.top-bar-section ul li {
-    box-shadow: 0 $top-bar-border-size 0 $primary-color;
 }
 
 /*