diff --git a/components/header-content.php b/components/header-content.php
index b9824a3..50cb79f 100644
--- a/components/header-content.php
+++ b/components/header-content.php
@@ -1,6 +1,4 @@
 <header id="page-header">
-  <div class="header-collumns">
-    <?php include(TEMPLATEPATH . '/components/logo.php'); ?>
-    <?php include(TEMPLATEPATH . '/components/navbar-pages.php'); ?>
-  </div>
+  <?php include(TEMPLATEPATH . '/components/navbar-pages.php'); ?>
+  <?php include(TEMPLATEPATH . '/components/logo.php'); ?>
 </header>
diff --git a/components/navbar-pages.php b/components/navbar-pages.php
index 52bbb8b..8884252 100644
--- a/components/navbar-pages.php
+++ b/components/navbar-pages.php
@@ -1,10 +1,46 @@
-<div class="navbar-area">
-  <?php
-    $listmenu = get_nav_menu_locations();
-    $menu = wp_get_nav_menu_items($listmenu['top-navbar']);
-      foreach ($menu as $menuElement) {
-        echo '<a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a>';
-      }
-    ?>
-  <a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar"><i class="fa fa-rss"  aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a>
-</div>
+<nav class="toolbar flex-that">
+  <ul>
+    <li>
+      <a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar">
+        <i class="fa fa-home"  aria-hidden="true"></i><span class="sr-only">Accueil</span>
+      </a>
+    </li>
+    <li>
+      <span class="btn btn-navbar">
+        Catégories <i class="fa fa-caret-down" aria-hidden="true"></i>
+        <ul class="card-menu">
+          <?php
+            $categories = get_categories( array(
+              'orderby' => 'name',
+              'order'   => 'ASC'
+            ) );
+
+            foreach( $categories as $category ) {
+              if ($category->slug != "blog" && $category->slug != "chapters") {
+                echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
+                }
+            }?>
+        </ul>
+      </span>
+    </li>
+    <?php
+      $listmenu = get_nav_menu_locations();
+      $menu = wp_get_nav_menu_items($listmenu['top-navbar']);
+        foreach ($menu as $menuElement) {
+          echo '<li><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
+        }
+      ?>
+  </ul>
+
+  <ul>
+    <?php
+      $listmenu = get_nav_menu_locations();
+      $menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
+        foreach ($menu as $menuElement) {
+          echo '<li><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
+        }
+      ?>
+    <li><a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar"><i class="fa fa-rss"  aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a></li>
+  </ul>
+</nav>
+
diff --git a/functions.php b/functions.php
index e8c2126..a057111 100644
--- a/functions.php
+++ b/functions.php
@@ -312,9 +312,10 @@ register_taxonomy('roman', 'post',
   function wpb_custom_new_menu() {
     register_nav_menus(
       array(
-        'top-navbar' => __( 'Top Navbar' ),
-        'link-menu' => __( 'Links Menu' ),
-        'footer-pages' => __( 'Footer pages' ),
+        'top-navbar' => __( 'Navbar (gauche)' ),
+        'top-navbar-2' => __( 'Navbar (droite)' ),
+        'link-menu' => __( 'Liste des liens' ),
+        'footer-pages' => __( 'Pages dans le footer' ),
         'social' => __( 'Reseaux sociaux' )
       )
     );
diff --git a/scss/_global.scss b/scss/_global.scss
index a21bfe7..ddb3c3c 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -33,44 +33,8 @@
 #page-header {
     background: $color-skyblue url('img/background.png') center bottom repeat-x;
     border-top: 6px solid $color-dark2;
-    padding-bottom:3rem;
-
-    .header-collumns {
-      @include container-big();
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-areas:
-      "nav"
-      "logo";
-      grid-template-rows: auto;
-      grid-gap: $lineheight;
-      padding-bottom: $lineheight;
-
-      .navbar-area {
-        grid-area: nav;
-        text-align: center;
-      }
-
-      .logo-area {
-        grid-area: logo;
-      }
-
-      @include lg() {
-        grid-template-columns: 1fr 1fr;
-        grid-template-areas: "logo nav";
-        height:11*$lineheight;
-        padding-bottom:0;
-        .navbar-area {
-          text-align: right;
-        }
-      }
-
-      @include xxl() {
-        height:13*$lineheight;
-
-      }
-
-    }
+    padding-top: .75rem;
+    padding-bottom:1.5rem;
 }
 
 header h1 {
@@ -81,11 +45,13 @@ header h1 {
     font-style:oblique;
     padding-bottom:0px;
     line-height: 1.5em;
+    max-width: 1600px;
+    margin: auto;
 
     img {
-      width: 100%;
+      width: 600px;
       height: auto;
-      margin-top:0.75rem;
+      margin-top:0rem;
     }
 
     a, a:visited, a:hover {
@@ -93,6 +59,51 @@ header h1 {
     }
 }
 
+.toolbar {
+  display:flex;
+  justify-content: space-between;
+  margin:auto;
+  padding:0;
+  max-width: 1600px;
+  z-index:2;
+
+  ul {
+    display:flex;
+    margin: 0;
+    padding: 0;
+    li {
+      list-style: none;
+      margin:0;
+      position:relative;
+      z-index: 2;
+      ul {
+        display:none;
+        position:absolute;
+        left:-0.75rem;
+        background-color:$color-light2;
+        padding: 1.5rem;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
+        z-index: 2;
+      }
+
+      &:hover {
+        ul {
+          display:flex;
+          flex-direction:column;
+        }
+      }
+    }
+  }
+
+  .btn-navbar {
+    margin:0rem;
+    margin-left:0.75rem;
+    margin-right: 0.75rem;
+  }
+}
+
 .navbar {
     border-left: 0;
     border-right: 0;
diff --git a/style.css b/style.css
index bd4ea03..191052e 100644
--- a/style.css
+++ b/style.css
@@ -606,34 +606,9 @@ th {
 #page-header {
   background: #2aa198 url("img/background.png") center bottom repeat-x;
   border-top: 6px solid #073642;
-  padding-bottom: 3rem; }
-  #page-header .header-collumns {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    max-width: 1600px;
-    margin: auto;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-areas: "nav" "logo";
-    grid-template-rows: auto;
-    grid-gap: 1.5rem;
-    padding-bottom: 1.5rem; }
-    #page-header .header-collumns .navbar-area {
-      grid-area: nav;
-      text-align: center; }
-    #page-header .header-collumns .logo-area {
-      grid-area: logo; }
-    @media (min-width: 992px) {
-      #page-header .header-collumns {
-        grid-template-columns: 1fr 1fr;
-        grid-template-areas: "logo nav";
-        height: 16.5rem;
-        padding-bottom: 0; }
-        #page-header .header-collumns .navbar-area {
-          text-align: right; } }
-    @media (min-width: 1600px) {
-      #page-header .header-collumns {
-        height: 19.5rem; } }
+  padding-top: .75rem;
+  padding-bottom: 1.5rem; }
+
 header h1 {
   border-style: none !important;
   color: #fdf6e3;
@@ -641,14 +616,50 @@ header h1 {
   font-size: 5.4em;
   font-style: oblique;
   padding-bottom: 0px;
-  line-height: 1.5em; }
+  line-height: 1.5em;
+  max-width: 1600px;
+  margin: auto; }
   header h1 img {
-    width: 100%;
+    width: 600px;
     height: auto;
-    margin-top: 0.75rem; }
+    margin-top: 0rem; }
   header h1 a, header h1 a:visited, header h1 a:hover {
     background-color: transparent; }
 
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  margin: auto;
+  padding: 0;
+  max-width: 1600px;
+  z-index: 2; }
+  .toolbar ul {
+    display: flex;
+    margin: 0;
+    padding: 0; }
+    .toolbar ul li {
+      list-style: none;
+      margin: 0;
+      position: relative;
+      z-index: 2; }
+      .toolbar ul li ul {
+        display: none;
+        position: absolute;
+        left: -0.75rem;
+        background-color: #eee8d5;
+        padding: 1.5rem;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
+        z-index: 2; }
+      .toolbar ul li:hover ul {
+        display: flex;
+        flex-direction: column; }
+  .toolbar .btn-navbar {
+    margin: 0rem;
+    margin-left: 0.75rem;
+    margin-right: 0.75rem; }
+
 .navbar {
   border-left: 0;
   border-right: 0;