[*] FO: Refactor top nav into Bootstrap navbar

themes/community-theme-16/header.tpl

@@ -54,16 +54,39 @@
     </div>
   {/if}
 
-  {capture name='displayNav'}{hook h='displayNav'}{/capture}
-  {if $smarty.capture.displayNav}
-    <div class="nav">
-      <div class="container">
-        <div class="row">
-          <nav>{$smarty.capture.displayNav}</nav>
-        </div>
+  <nav class="navbar navbar-inverse">
+    <div class="container">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false">
+          <span class="sr-only">{l s='Toggle navigation'}</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a class="navbar-brand" href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}">{$PS_SHOP_NAME|escape:'html':'UTF-8'}</a>
+      </div>
+
+      <div class="collapse navbar-collapse" id="header-navbar">
+
+        {capture name='displayHeaderNavbarLeftNav'}{hook h='displayHeaderNavbarLeftNav'}{/capture}
+        {if $smarty.capture.displayHeaderNavbarLeftNav}
+          <ul id="header-navbar-left-nav" class="nav navbar-nav">
+            {$smarty.capture.displayHeaderNavbarLeftNav}
+          </ul>
+        {/if}
+
+        {hook h='displayHeaderNavbar'}
+
+        {capture name='displayNav'}{hook h='displayNav'}{/capture}
+        {if $smarty.capture.displayNav}
+          <ul id="header-navbar-right-nav" class="nav navbar-nav navbar-right">
+            {$smarty.capture.displayNav}
+          </ul>
+        {/if}
+
       </div>
     </div>
-  {/if}
+  </nav>
 
   <div id="header-blocks" class="container">
     <div class="row">

themes/community-theme-16/sass/partials/_page.scss

@@ -1,71 +1,28 @@
 $header-banner-bg: #000;
+$page-body-bg: #ccc;
+$page-content-bg: #fff;
 
 body {
-  background-color: #ccc;
-}
-
-#columns {
-  background-color: #fff;
+  background-color: $page-body-bg;
 }
 
 #header-blocks {
-  background-color: #fff;
-}
-
-#header {
-  // z-index: 5003;
+  background-color: $page-content-bg;
 }
 
 #columns {
   position: relative;
   padding-bottom: 50px;
   padding-top: 15px;
+  background-color: $page-content-bg;
 }
 
-#index {
-  .tab-content {
-    margin-bottom: 30px;
-  }
+#header-banners {
+  background-color: $header-banner-bg;
 }
 
 #header {
-  // z-index: 1;
-  position: relative;
-  .nav {
-    background: #333;
-    .row {
-      margin: 0px;
-    }
-    nav {
-      width: 100%;
-    }
-  }
-  .row {
-    position: relative;
-    > .container {
-      position: relative;
-    }
-    #header_logo {
-      padding-top: 15px;
-      @extend .col-sm-4;
-      @media (max-width: $screen-md) {
-        padding-top: 40px;
-      }
-      @media (max-width: $screen-xs-max) {
-        padding-top: 15px;
-        img {
-          margin: 0 auto;
-        }
-      }
-    }
-  }
-  @media (min-width: $screen-xs-max){
-    .col-sm-4 + .col-sm-4 + .col-sm-4 {
-      float: right;
-    }
+  .navbar {
+    margin-bottom: 0;
   }
 }
-
-#header-banners {
-  background-color: $header-banner-bg;
-}