diff --git a/web/pgadmin/browser/templates/browser/index.html b/web/pgadmin/browser/templates/browser/index.html
index 12f01a3..a914c00 100644
--- a/web/pgadmin/browser/templates/browser/index.html
+++ b/web/pgadmin/browser/templates/browser/index.html
@@ -93,7 +93,7 @@ require.onResourceLoad = function (context, map, depMaps) {
   <span class="pg-sp-icon fa fa-spinner fa-pulse"></span>
   <span class="pg-sp-text">{{ _('Loading {0} v{1}...').format(config.APP_NAME, config.APP_VERSION) }}</span>
 </div>
-<nav class="navbar-inverse navbar-fixed-top">
+<nav class="navbar-inverse navbar-fixed-top pg-navbar">
     <div class="container-fluid">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
@@ -166,7 +166,7 @@ require.onResourceLoad = function (context, map, depMaps) {
     </div>
 </nav>
 
-<div id="dockerContainer" style="position:absolute;left:0px;right:0px;top:50px;bottom:0px;"></div>
+<div id="dockerContainer" class="pg-docker"></div>
 
 {% include 'browser/messages.html' %}
 
diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css
index f31bc3d..cd90aba 100755
--- a/web/pgadmin/static/css/overrides.css
+++ b/web/pgadmin/static/css/overrides.css
@@ -6,6 +6,34 @@ body {
     padding-bottom: 20px;
 }
 
+@media (min-width: 768px) {
+  .pg-navbar {
+    height: 40px;
+  }
+
+  .pg-navbar .navbar-brand {
+    padding: 10px 15px;
+    height: 40px;
+  }
+
+  .pg-navbar .navbar-nav > li > a {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .pg-docker {
+    top: 40px !important;
+  }
+}
+
+.pg-docker {
+  position:absolute;
+  left:0px;
+  right:0px;
+  top:50px;
+  bottom:0px;
+}
+
 .app-icon {
     vertical-align: middle;
     font-size: 25px;