Fixing menu responsiveness.

bornhack/static_src/css/bornhack.css

@@ -34,7 +34,7 @@ a, a:active, a:focus {
 
 /* Navbar stuff */
 .navbar {
-  width: 700px;
+  max-width: 700px;
   margin: auto;
   background-color: rgb(255, 255, 255);
   border-bottom: 1px solid rgb(250, 250, 250);
@@ -44,10 +44,33 @@ a, a:active, a:focus {
   min-height: 80px;
 }
 
-.nav li a {
+@media (min-width: 768px) {
-  padding: 30px 25px;
+  .nav li a {
+    padding: 30px 15px;
+  }
+  .nav {
+    float: right!important;
+  }
 }
 
+@media (max-width: 767px) {
+  .nav li {
+    text-align: center;
+    font-size: 20px;
+  }
+}
+
+.navbar-toggle .icon-bar {
+  background: black;
+  width: 45px;
+  height: 8px;
+}
+
+.navbar-toggle .icon-bar+.icon-bar {
+  margin-top: 6px;
+}
+
+
 /* Form stuff */
 
 .form-control, .form-control:focus {
@@ -62,3 +85,4 @@ a, a:active, a:focus {
 #map {
   height: 500px;
 }
+

bornhack/templates/base.html

@@ -36,7 +36,7 @@
         </div>
 
         <div id="navbar" class="navbar-collapse collapse">
-          <ul class="nav navbar-nav pull-right">
+          <ul class="nav navbar-nav">
             <li><a href="{% url 'good-to-know' %}">Good to know</a></li>
             {% if user.is_authenticated %}
             <li><a href="{% url 'profiles:detail' %}">Profile</a></li>