navbar: make responsive

demo.html

@@ -47,11 +47,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <li><a href="#">Chat</a></li>
                     <li><a href="#">Cerca</a></li>
                     <li><a href="#">Planet</a></li>
-                    <li class="right"><a href="#">Telegram</a></li>
-                    <li class="right"><a href="#">YouTube</a></li>
-                    <li class="right"><a href="#">Google+</a></li>
-                    <li class="right"><a href="#">Twitter</a></li>
-                    <li class="right"><a href="#">Facebook</a></li>
+                </ul>
+                <ul class="right">
+                    <li><a href="#">Telegram</a></li>
+                    <li><a href="#">YouTube</a></li>
+                    <li><a href="#">Google+</a></li>
+                    <li><a href="#">Twitter</a></li>
+                    <li><a href="#">Facebook</a></li>
                 </ul>
             </div>
         </nav>

scss/_navbar.scss

@@ -14,7 +14,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@mixin navbar-style($background, $color, $hover_color) {
+@mixin navbar-style($background, $color, $hover_color, $font_size) {
     background: $background;
 
     ul li {
@@ -22,6 +22,8 @@
         border-right: 1px solid mix(#000, $background, 5%);
         border-left: 1px solid mix(#000, $background, 5%);
 
+        font-size: $font_size;
+
         a {
             color: $color;
 
@@ -44,18 +46,30 @@
 nav {
     box-shadow: 0 0.15em 0.15em rgba(100, 100, 100, 0.1);
 
+    font-size: 0;
+    width: 100%;
+    overflow: auto;
+    white-space: nowrap;
+
     ul {
         padding: 0;
         margin: 0;
+        font-size: 0;
+
+        float: left;
+
+        &.right {
+            float: right;
+        }
 
         li {
             padding: 0;
-            padding-right: 0.1em;
+            padding-right: 1px;
             margin: 0;
-            margin-left: -0.1em;
+            margin-left: -1px;
 
-            display: block;
-            float: left;
+            display: inline-block;
+            vertical-align: top;
 
             a {
                 display: inline-block;
@@ -68,40 +82,36 @@ nav {
                 }
             }
 
-            &.right {
-                float: right;
-            }
-
             &.site-name a {
                 font-size: 1.4em;
                 padding: 0.45em 0.7em 0.45em 0.4em;
                 line-height: 100%;
             }
         }
+    }
 
-        &:after {
-            clear: both;
-            content: "";
-            height: 0;
-            visibility: hidden;
-            display: block;
-        }
+    &:after {
+        clear: both;
+        content: "";
+        height: 0;
+        visibility: hidden;
+        display: block;
     }
 
     @include navbar-style(
         mix(#fff, $color_warm_gray, 90%),
         mix(#000, $color_warm_gray, 40%),
-        mix(#000, $color_warm_gray, 60%)
+        mix(#000, $color_warm_gray, 60%),
+        1rem,
     );
 
     &.main-navbar {
         font-weight: 400;
-        @include navbar-style($color_orange, #fff, #fff);
+        @include navbar-style($color_orange, #fff, #fff, 1rem);
     }
 
     &.sites-list {
-        font-size: 0.8em;
-        @include navbar-style($color_cool_gray, $color_warm_gray, #fff);
+        @include navbar-style($color_cool_gray, $color_warm_gray, #fff, 0.8rem);
 
         ul li a {
             padding: 0.5em 0.7em;
@@ -110,4 +120,15 @@ nav {
             }
         }
     }
+
+    @media all and (max-width: $page_size) {
+        div.container {
+            display: inline-block;
+        }
+
+        ul {
+            display: inline-block;
+            float: none !important;
+        }
+    }
 }