diff --git a/blog/assets/css/additional_styles.css b/blog/assets/css/additional_styles.css
index 6eb7317749..0c7faadbdc 100644
--- a/blog/assets/css/additional_styles.css
+++ b/blog/assets/css/additional_styles.css
@@ -62,19 +62,23 @@ body {
 }
 .navbar .nav {
   margin: 0;
-  display: table;
+  display: flex;
+  flex-wrap: wrap;
   width: 100%;
+  justify-content: center;
 }
 .navbar .nav li {
-  display: table-cell;
-  width: 1%;
+  flex: 1 1 auto;
+  min-width: 100px;
   float: none;
 }
 .navbar .nav li a {
   font-weight: bold;
   text-align: center;
-  border-left: 1px solid rgba(255,255,255,.75);
-  border-right: 1px solid rgba(0,0,0,.1);
+  border-left: 1px solid rgba(255, 255, 255, 0.75);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 10px 8px;
+  display: block;
 }
 .navbar .nav li:first-child a {
   border-left: 0;
@@ -84,3 +88,30 @@ body {
   border-right: 0;
   border-radius: 0 3px 3px 0;
 }
+
+@media (max-width: 768px) {
+  .navbar .nav li {
+    flex: 0 1 auto;
+    min-width: auto;
+  }
+  .navbar .nav li a {
+    font-size: 14px;
+    padding: 8px 5px;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 480px) {
+  .navbar .nav {
+    flex-direction: column;
+  }
+  .navbar .nav li {
+    width: 100%;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .navbar .nav li a {
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+  }
+}
diff --git a/bylaws.html b/bylaws.html
index be439b1e8c..485a750e9c 100644
--- a/bylaws.html
+++ b/bylaws.html
@@ -56,12 +56,14 @@
       }
       .navbar .nav {
         margin: 0;
-        display: table;
+        display: flex;
+        flex-wrap: wrap;
         width: 100%;
+        justify-content: center;
       }
       .navbar .nav li {
-        display: table-cell;
-        width: 1%;
+        flex: 1 1 auto;
+        min-width: 100px;
         float: none;
       }
       .navbar .nav li a {
@@ -69,6 +71,8 @@
         text-align: center;
         border-left: 1px solid rgba(255,255,255,.75);
         border-right: 1px solid rgba(0,0,0,.1);
+        padding: 10px 8px;
+        display: block;
       }
       .navbar .nav li:first-child a {
         border-left: 0;
@@ -78,6 +82,33 @@
         border-right: 0;
         border-radius: 0 3px 3px 0;
       }
+
+      @media (max-width: 768px) {
+        .navbar .nav li {
+          flex: 0 1 auto;
+          min-width: auto;
+        }
+        .navbar .nav li a {
+          font-size: 14px;
+          padding: 8px 5px;
+          white-space: nowrap;
+        }
+      }
+
+      @media (max-width: 480px){
+        .navbar .nav {
+          flex-direction: column;
+        }
+        .navbar .nav li {
+          width: 100%;
+          border-bottom: 1px solid rgba(0, 0, 0, .1);
+        }
+        .navbar .nav li a {
+          border-left: 0;
+          border-right: 0;
+          border-radius: 0;
+        }
+      }
   </style>
   <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
   <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
diff --git a/community.html b/community.html
index 95c033fcb3..f363f8bb93 100644
--- a/community.html
+++ b/community.html
@@ -51,12 +51,14 @@
       }
       .navbar .nav {
         margin: 0;
-        display: table;
+        display: flex;
+        flex-wrap: wrap;
         width: 100%;
+        justify-content: center;
       }
       .navbar .nav li {
-        display: table-cell;
-        width: 1%;
+        flex: 1 1 auto;
+        min-width: 100px;
         float: none;
       }
       .navbar .nav li a {
@@ -64,6 +66,8 @@
         text-align: center;
         border-left: 1px solid rgba(255,255,255,.75);
         border-right: 1px solid rgba(0,0,0,.1);
+        padding: 10px 8px;
+        display: block;
       }
       .navbar .nav li:first-child a {
         border-left: 0;
@@ -73,6 +77,33 @@
         border-right: 0;
         border-radius: 0 3px 3px 0;
       }
+
+      @media (max-width: 768px) {
+        .navbar .nav li {
+          flex: 0 1 auto;
+          min-width: auto;
+        }
+        .navbar .nav li a {
+          font-size: 14px;
+          padding: 8px 5px;
+          white-space: nowrap;
+        }
+      }
+
+      @media (max-width: 480px){
+        .navbar .nav {
+          flex-direction: column;
+        }
+        .navbar .nav li {
+          width: 100%;
+          border-bottom: 1px solid rgba(0, 0, 0, .1);
+        }
+        .navbar .nav li a {
+          border-left: 0;
+          border-right: 0;
+          border-radius: 0;
+        }
+      }
     </style>
     <link href="css/bootstrap-responsive.css" rel="stylesheet">
 
diff --git a/downloads.html b/downloads.html
index 96a5b1b55b..ba2e2aef03 100644
--- a/downloads.html
+++ b/downloads.html
@@ -53,12 +53,14 @@
       }
       .navbar .nav {
         margin: 0;
-        display: table;
+        display: flex;
+        flex-wrap: wrap;
         width: 100%;
+        justify-content: center;
       }
       .navbar .nav li {
-        display: table-cell;
-        width: 1%;
+        flex: 1 1 auto;
+        min-width: 100px;
         float: none;
       }
       .navbar .nav li a {
@@ -66,6 +68,8 @@
         text-align: center;
         border-left: 1px solid rgba(255,255,255,.75);
         border-right: 1px solid rgba(0,0,0,.1);
+        padding: 10px 8px;
+        display: block;
       }
       .navbar .nav li:first-child a {
         border-left: 0;
@@ -75,6 +79,33 @@
         border-right: 0;
         border-radius: 0 3px 3px 0;
       }
+
+      @media (max-width: 768px) {
+        .navbar .nav li {
+          flex: 0 1 auto;
+          min-width: auto;
+        }
+        .navbar .nav li a {
+          font-size: 14px;
+          padding: 8px 5px;
+          white-space: nowrap;
+        }
+      }
+
+      @media (max-width: 480px){
+        .navbar .nav {
+          flex-direction: column;
+        }
+        .navbar .nav li {
+          width: 100%;
+          border-bottom: 1px solid rgba(0, 0, 0, .1);
+        }
+        .navbar .nav li a {
+          border-left: 0;
+          border-right: 0;
+          border-radius: 0;
+        }
+      }
   </style>
   <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
   <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
diff --git a/impala-docs.html b/impala-docs.html
index c4f4b080c5..505bbe11ba 100644
--- a/impala-docs.html
+++ b/impala-docs.html
@@ -51,12 +51,14 @@
       }
       .navbar .nav {
         margin: 0;
-        display: table;
+        display: flex;
+        flex-wrap: wrap;
         width: 100%;
+        justify-content: center;
       }
       .navbar .nav li {
-        display: table-cell;
-        width: 1%;
+        flex: 1 1 auto;
+        min-width: 100px;
         float: none;
       }
       .navbar .nav li a {
@@ -64,6 +66,8 @@
         text-align: center;
         border-left: 1px solid rgba(255,255,255,.75);
         border-right: 1px solid rgba(0,0,0,.1);
+        padding: 10px 8px;
+        display: block;
       }
       .navbar .nav li:first-child a {
         border-left: 0;
@@ -73,6 +77,33 @@
         border-right: 0;
         border-radius: 0 3px 3px 0;
       }
+
+      @media (max-width: 768px) {
+        .navbar .nav li {
+          flex: 0 1 auto;
+          min-width: auto;
+        }
+        .navbar .nav li a {
+          font-size: 14px;
+          padding: 8px 5px;
+          white-space: nowrap;
+        }
+      }
+
+      @media (max-width: 480px){
+        .navbar .nav {
+          flex-direction: column;
+        }
+        .navbar .nav li {
+          width: 100%;
+          border-bottom: 1px solid rgba(0, 0, 0, .1);
+        }
+        .navbar .nav li a {
+          border-left: 0;
+          border-right: 0;
+          border-radius: 0;
+        }
+      }
     </style>
     <link href="css/bootstrap-responsive.css" rel="stylesheet">
 
diff --git a/index.html b/index.html
index cc8f27bfd4..f5ad0c7a13 100644
--- a/index.html
+++ b/index.html
@@ -51,12 +51,14 @@
       }
       .navbar .nav {
         margin: 0;
-        display: table;
+        display: flex;
+        flex-wrap: wrap;
         width: 100%;
+        justify-content: center;
       }
       .navbar .nav li {
-        display: table-cell;
-        width: 1%;
+        flex: 1 1 auto;
+        min-width: 100px;
         float: none;
       }
       .navbar .nav li a {
@@ -64,6 +66,8 @@
         text-align: center;
         border-left: 1px solid rgba(255,255,255,.75);
         border-right: 1px solid rgba(0,0,0,.1);
+        padding: 10px 8px;
+        display: block;
       }
       .navbar .nav li:first-child a {
         border-left: 0;
@@ -73,6 +77,33 @@
         border-right: 0;
         border-radius: 0 3px 3px 0;
       }
+
+      @media (max-width: 768px) {
+        .navbar .nav li {
+          flex: 0 1 auto;
+          min-width: auto;
+        }
+        .navbar .nav li a {
+          font-size: 14px;
+          padding: 8px 5px;
+          white-space: nowrap;
+        }
+      }
+
+      @media (max-width: 480px){
+        .navbar .nav {
+          flex-direction: column;
+        }
+        .navbar .nav li {
+          width: 100%;
+          border-bottom: 1px solid rgba(0, 0, 0, .1);
+        }
+        .navbar .nav li a {
+          border-left: 0;
+          border-right: 0;
+          border-radius: 0;
+        }
+      }
     </style>
     <link href="css/bootstrap-responsive.css" rel="stylesheet">
 
diff --git a/overview.html b/overview.html
index 59fe64b793..8591b37c65 100644
--- a/overview.html
+++ b/overview.html
@@ -51,12 +51,14 @@
       }
       .navbar .nav {
         margin: 0;
-        display: table;
+        display: flex;
+        flex-wrap: wrap;
         width: 100%;
+        justify-content: center;
       }
       .navbar .nav li {
-        display: table-cell;
-        width: 1%;
+        flex: 1 1 auto;
+        min-width: 100px;
         float: none;
       }
       .navbar .nav li a {
@@ -64,6 +66,8 @@
         text-align: center;
         border-left: 1px solid rgba(255,255,255,.75);
         border-right: 1px solid rgba(0,0,0,.1);
+        padding: 10px 8px;
+        display: block;
       }
       .navbar .nav li:first-child a {
         border-left: 0;
@@ -73,6 +77,33 @@
         border-right: 0;
         border-radius: 0 3px 3px 0;
       }
+
+      @media (max-width: 768px) {
+        .navbar .nav li {
+          flex: 0 1 auto;
+          min-width: auto;
+        }
+        .navbar .nav li a {
+          font-size: 14px;
+          padding: 8px 5px;
+          white-space: nowrap;
+        }
+      }
+
+      @media (max-width: 480px){
+        .navbar .nav {
+          flex-direction: column;
+        }
+        .navbar .nav li {
+          width: 100%;
+          border-bottom: 1px solid rgba(0, 0, 0, .1);
+        }
+        .navbar .nav li a {
+          border-left: 0;
+          border-right: 0;
+          border-radius: 0;
+        }
+      }
     </style>
     <link href="css/bootstrap-responsive.css" rel="stylesheet">