header

assets/app/frontend/js/script.js

 $(document).ready(function () {
-    console.log('test');
+    menuToggle();
 });
+
+function menuToggle() {
+    var box = $('.menu-content');
+    var button = $('.toggle');
+    button.on('click', function(){
+        box.toggle('slow');
+    });
+}

assets/app/frontend/scss/base.scss

-h1 {
-  color: red;
+#content-page {
+  margin-top: 150px;
 }

assets/app/frontend/scss/header.scss

 #menu {
-  .navbar-toggler {
-    background-color: $yellow;
+  .menu-content {
+    background-color: #FFF;
+    display: none;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    z-index: 100;
+    top: 0;
+    left: 0;
+
+    .row-menu {
+      height: 100%;
+
+      .row-toggle {
+        height: 16%;
+      }
+
+      .row-list {
+        height: 84%;
+
+        nav {
+          ul {
+            height: 100%;
+            margin: 0;
+
+            li {
+              width: 100%;
+              padding-left: 20%;
+              padding-right: 15%;
+              margin-bottom: 8%;
+              display: inline-block;
+
+              a {
+                color: $green;
+                font-size: 50px;
+                font-family: dinbold;
+                font-weight: bold;
+                line-height: 50px;
+              }
+
+              &.contact {
+                margin-bottom: 5%;
+
+                a {
+                  border: 2px solid $yellow;
+                  padding: 10px 45px;
+                  font-size: 25px;
+                }
+              }
+
+              .yellow-trait {
+                width: 20%;
+                height: 10px;
+                position: absolute;
+                top: 0;
+                right: 0;
+                background-color: $yellow;
+              }
+            }
+          }
+        }
+
+        .col-logo {
+          .logo {
+            position: absolute;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            left: 50%;
+          }
+        }
+      }
+    }
   }
 
-  .space_colla {
-    color: $yellow;
+  .menu-fixed {
+    background-color: #FFF;
+    height: 150px;
+    z-index: 2;
+
+    .navbar-brand {
+      width: 50%;
+    }
+
+    .participate {
+      font-size: 30px;
+      color: #568b6f;
+      font-family: dinbold;
+      border: 2px solid #568b6f;
+      padding: 8px 10px;
+      font-weight: bold;
+    }
+
+    .space-collab {
+      color: $yellow;
+      font-size: 20px;
+      font-family: dinbold;
+    }
   }
 }

assets/app/frontend/scss/vars.scss

 $red: #e73452;
 $orange: #ffcc00;
 $blue: #17428c;
+$green: #568b6f;
 
 @font-face {
   font-family: 'dinregular';

public/build/app-frontend.js

 /***/ (() => {
 
 $(document).ready(function () {
-  console.log('test');
+  menuToggle();
 });
 
+function menuToggle() {
+  var box = $('.menu-content');
+  var button = $('.toggle');
+  button.on('click', function () {
+    box.toggle('slow');
+  });
+}
+
 /***/ }),
 
 /***/ "./assets/app/frontend/app/app.scss":
 /******/ var __webpack_exports__ = __webpack_require__.O();
 /******/ }
 ]);
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuY29tbW9uLmpzIiwid2VicGFjazovLy8uL2Fzc2V0cy9hcHAvZnJvbnRlbmQvYXBwL2FwcC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2pzL3NjcmlwdC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuc2NzcyJdLCJuYW1lcyI6WyIkIiwiZG9jdW1lbnQiLCJyZWFkeSIsImNvbnNvbGUiLCJsb2ciXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7OztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUVBO0FBQ0E7Q0FHQTtBQUNBLHVCOzs7Ozs7Ozs7Ozs7Ozs7O0FDWkE7Ozs7Ozs7Ozs7O0FDQUFBLENBQUMsQ0FBQ0MsUUFBRCxDQUFELENBQVlDLEtBQVosQ0FBa0IsWUFBWTtBQUMxQkMsU0FBTyxDQUFDQyxHQUFSLENBQVksTUFBWjtBQUNILENBRkQsRTs7Ozs7Ozs7Ozs7O0FDQUEiLCJmaWxlIjoiYXBwLWZyb250ZW5kLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdlbGNvbWUgdG8geW91ciBhcHAncyBtYWluIEphdmFTY3JpcHQgZmlsZSFcbiAqXG4gKiBXZSByZWNvbW1lbmQgaW5jbHVkaW5nIHRoZSBidWlsdCB2ZXJzaW9uIG9mIHRoaXMgSmF2YVNjcmlwdCBmaWxlXG4gKiAoYW5kIGl0cyBDU1MgZmlsZSkgaW4geW91ciBiYXNlIGxheW91dCAoYmFzZS5odG1sLnR3aWcpLlxuICovXG5cbi8vIGFueSBDU1MgeW91IGltcG9ydCB3aWxsIG91dHB1dCBpbnRvIGEgc2luZ2xlIGNzcyBmaWxlIChhcHAuY3NzIGluIHRoaXMgY2FzZSlcbmltcG9ydCAnLi9hcHAuc2Nzcyc7XG5pbXBvcnQgJy4vYXBwLmpzJztcblxuLy8gc3RhcnQgdGhlIFN0aW11bHVzIGFwcGxpY2F0aW9uXG4vL2ltcG9ydCAnLi9ib290c3RyYXAnOyIsImltcG9ydCAnYm9vdHN0cmFwJztcbmltcG9ydCBcIi4uL2pzL3NjcmlwdFwiO1xuIiwiJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24gKCkge1xuICAgIGNvbnNvbGUubG9nKCd0ZXN0Jyk7XG59KTtcbiIsIi8vIGV4dHJhY3RlZCBieSBtaW5pLWNzcy1leHRyYWN0LXBsdWdpblxuZXhwb3J0IHt9OyJdLCJzb3VyY2VSb290IjoiIn0=
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuY29tbW9uLmpzIiwid2VicGFjazovLy8uL2Fzc2V0cy9hcHAvZnJvbnRlbmQvYXBwL2FwcC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2pzL3NjcmlwdC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuc2NzcyJdLCJuYW1lcyI6WyIkIiwiZG9jdW1lbnQiLCJyZWFkeSIsIm1lbnVUb2dnbGUiLCJib3giLCJidXR0b24iLCJvbiIsInRvZ2dsZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7QUFDQTtDQUdBO0FBQ0EsdUI7Ozs7Ozs7Ozs7Ozs7Ozs7QUNaQTs7Ozs7Ozs7Ozs7QUNBQUEsQ0FBQyxDQUFDQyxRQUFELENBQUQsQ0FBWUMsS0FBWixDQUFrQixZQUFZO0FBQzFCQyxZQUFVO0FBQ2IsQ0FGRDs7QUFJQSxTQUFTQSxVQUFULEdBQXNCO0FBQ2xCLE1BQUlDLEdBQUcsR0FBR0osQ0FBQyxDQUFDLGVBQUQsQ0FBWDtBQUNBLE1BQUlLLE1BQU0sR0FBR0wsQ0FBQyxDQUFDLFNBQUQsQ0FBZDtBQUNBSyxRQUFNLENBQUNDLEVBQVAsQ0FBVSxPQUFWLEVBQW1CLFlBQVU7QUFDekJGLE9BQUcsQ0FBQ0csTUFBSixDQUFXLE1BQVg7QUFDSCxHQUZEO0FBR0gsQzs7Ozs7Ozs7Ozs7O0FDVkQiLCJmaWxlIjoiYXBwLWZyb250ZW5kLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdlbGNvbWUgdG8geW91ciBhcHAncyBtYWluIEphdmFTY3JpcHQgZmlsZSFcbiAqXG4gKiBXZSByZWNvbW1lbmQgaW5jbHVkaW5nIHRoZSBidWlsdCB2ZXJzaW9uIG9mIHRoaXMgSmF2YVNjcmlwdCBmaWxlXG4gKiAoYW5kIGl0cyBDU1MgZmlsZSkgaW4geW91ciBiYXNlIGxheW91dCAoYmFzZS5odG1sLnR3aWcpLlxuICovXG5cbi8vIGFueSBDU1MgeW91IGltcG9ydCB3aWxsIG91dHB1dCBpbnRvIGEgc2luZ2xlIGNzcyBmaWxlIChhcHAuY3NzIGluIHRoaXMgY2FzZSlcbmltcG9ydCAnLi9hcHAuc2Nzcyc7XG5pbXBvcnQgJy4vYXBwLmpzJztcblxuLy8gc3RhcnQgdGhlIFN0aW11bHVzIGFwcGxpY2F0aW9uXG4vL2ltcG9ydCAnLi9ib290c3RyYXAnOyIsImltcG9ydCAnYm9vdHN0cmFwJztcbmltcG9ydCBcIi4uL2pzL3NjcmlwdFwiO1xuIiwiJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24gKCkge1xuICAgIG1lbnVUb2dnbGUoKTtcbn0pO1xuXG5mdW5jdGlvbiBtZW51VG9nZ2xlKCkge1xuICAgIHZhciBib3ggPSAkKCcubWVudS1jb250ZW50Jyk7XG4gICAgdmFyIGJ1dHRvbiA9ICQoJy50b2dnbGUnKTtcbiAgICBidXR0b24ub24oJ2NsaWNrJywgZnVuY3Rpb24oKXtcbiAgICAgICAgYm94LnRvZ2dsZSgnc2xvdycpO1xuICAgIH0pO1xufSIsIi8vIGV4dHJhY3RlZCBieSBtaW5pLWNzcy1leHRyYWN0LXBsdWdpblxuZXhwb3J0IHt9OyJdLCJzb3VyY2VSb290IjoiIn0=

templates/frontend/base.html.twig

 {% block header %}
     {% include 'frontend/header.html.twig' %}
 {% endblock %}
-{% block body %}{% endblock %}
+<div id="content-page">
+    {% block body %}{% endblock %}
+</div>
 {% block footer %}
     {% include 'frontend/footer.html.twig' %}
 {% endblock %}

templates/frontend/header.html.twig

-<div id="menu" class="fixed-top">
-    <div class="collapse" id="navbarToggleExternalContent">
-        <div class="p-4">
-            <h5 class="text-white h4">Collapsed content</h5>
-            <span class="text-muted">Toggleable via the navbar brand.</span>
+<div id="menu">
+    <div class="container-fluid menu-content">
+        <div class="row-menu">
+            <div class="row row-toggle">
+                <div class="col-12">
+                    <button class="toggle" type="button">
+                        CLOSE
+                    </button>
+                </div>
+            </div>
+            <div class="row row-list">
+                <nav class="col-6">
+                    <ul>
+                        <li>
+                            <span class="yellow-trait"></span>
+                            <a href="" title="Accueil">
+                                Accueil
+                            </a>
+                        </li>
+                        <li>
+                            <a href="" title="Cartographie rêvolutionnaire">
+                                Cartographie rêvolutionnaire
+                            </a>
+                        </li>
+                        <li>
+                            <a href="" title="Planisphère des solutions">
+                                Planisphère des solutions
+                            </a>
+                        </li>
+                        <li>
+                            <a href="" title="Ressourcerie">
+                                Ressourcerie
+                            </a>
+                        </li>
+                        <li>
+                            <a href="" title="A propos">
+                                A propos
+                            </a>
+                        </li>
+                        <li class="contact">
+                            <a href="" title="Contacts">
+                                CONTACTS
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+                <div class="col-6 col-logo">
+                    <img class="logo" src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" alt="">
+                </div>
+            </div>
         </div>
     </div>
-    <nav class="navbar">
-        <a class="navbar-brand" href="#">
-            <img src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" width="200" alt="">
-        </a>
-        <a class="participate" href="">
-            Participer
-        </a>
-        <a class="space_colla" href="">
-            Espace collaboratif
-        </a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-    </nav>
+    <div class="fixed-top menu-fixed">
+        <nav class="navbar">
+            <a class="navbar-brand" href="#">
+                <img src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" width="200" alt="">
+            </a>
+            <a class="participate" href="">
+                PARTICIPER
+            </a>
+            <a class="space-collab" href="">
+                Espace collaboratif
+            </a>
+            <button class="toggle" type="button">
+                TOGGLE
+            </button>
+        </nav>
+    </div>
 </div>

templates/frontend/home.html.twig

 {% block title %}Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté{% endblock %}
 
 {% block meta %}
-    <meta name="title" content="Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté" />
-    <meta name="description" content="La plateforme numérique « Aux actes Citoyens » arrive bientôt. En attendant, rejoignez-nous !" />
+    <meta name="title" content="Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté"/>
+    <meta name="description"
+          content="La plateforme numérique « Aux actes Citoyens » arrive bientôt. En attendant, rejoignez-nous !"/>
 {% endblock %}
 
 {% block body %}
     <div class="container">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis nibh non nisl ornare, ut fringilla tellus
+        iaculis. Maecenas in dignissim tellus, id consectetur metus. Integer et lorem vitae ante feugiat ultrices in ac
+        augue. Curabitur a ex id erat venenatis finibus. Pellentesque consequat imperdiet eleifend. Vivamus ornare,
+        mauris a lacinia consequat, mi turpis rhoncus lorem, ultricies fringilla leo metus eu enim. Vivamus maximus
+        justo nibh, nec ultrices tortor venenatis in. Pellentesque habitant morbi tristique senectus et netus et
+        malesuada fames ac turpis egestas. Nullam nec dui eu elit semper sodales quis ac sapien. Sed nibh mauris,
+        posuere non ultricies nec, malesuada quis nisl.
 
+        Sed aliquet quis risus non lobortis. Nulla dolor urna, egestas quis tempor ac, tristique non justo. Quisque non
+        nisi ut sapien porta dictum. Maecenas aliquam quis risus eget maximus. Etiam quis velit euismod, porttitor ex a,
+        molestie lectus. Donec viverra sapien quis metus vulputate, sed elementum enim suscipit. Donec semper, orci eget
+        dignissim convallis, purus elit hendrerit felis, eu interdum massa metus nec eros.
+
+        Vivamus maximus elementum dolor. Nulla vulputate orci id elit dignissim bibendum sodales ut nunc. Donec nec
+        risus varius, elementum felis vitae, facilisis arcu. Vestibulum faucibus a neque ac rhoncus. Morbi scelerisque
+        dignissim justo id hendrerit. Aenean ullamcorper euismod magna, in lobortis quam ornare non. Aliquam pulvinar,
+        quam ut posuere malesuada, nisi neque malesuada tellus, in ornare purus justo ut orci. Curabitur quis rutrum
+        metus.
+
+        Praesent venenatis libero nec lobortis iaculis. Etiam tortor velit, interdum sed massa commodo, vestibulum
+        ultrices nisl. Ut risus dui, suscipit vel eros ut, consectetur vestibulum eros. Quisque tempus rhoncus dolor
+        porta sagittis. Ut egestas erat quis molestie ultrices. Cras egestas ex eu velit semper efficitur. Praesent
+        consectetur lacinia lectus, vel efficitur mauris dignissim vel. Suspendisse pharetra elit egestas tincidunt
+        volutpat. In accumsan at felis nec eleifend. Suspendisse potenti. Nam mollis sodales vulputate. Cras odio justo,
+        congue ac turpis vitae, vulputate bibendum arcu. Cras vitae justo orci.
+
+        Sed pharetra in dolor quis vulputate. Morbi quis sapien lacinia, fermentum dui nec, fermentum ligula. Donec
+        rutrum, nibh vel laoreet fermentum, sapien sem cursus neque, vel elementum ex eros non lectus. Curabitur semper
+        egestas vehicula. Vivamus nunc mi, porttitor at fermentum sed, pretium nec tellus. Nunc dui dolor, mollis vel
+        felis in, vestibulum vulputate lectus. Etiam porttitor est sit amet est dictum, eget aliquam ligula suscipit.
+        Fusce gravida eros vel magna rutrum, vel consectetur eros consectetur. Vestibulum ante ipsum primis in faucibus
+        orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+        posuere cubilia curae; Fusce nec porttitor felis, non condimentum ligula. Aliquam elementum auctor libero, vel
+        porttitor sem fermentum et. Nullam tempor faucibus tellus, in aliquet mi aliquet a.
+
+        Etiam velit orci, dictum ut risus egestas, lacinia finibus tellus. In condimentum velit id ex feugiat maximus.
+        Maecenas lorem purus, consequat eu luctus sit amet, rutrum at lectus. Etiam lobortis tellus et aliquam
+        consectetur. Morbi porta lacinia dapibus. Donec fermentum nisl vel blandit aliquam. Nullam rhoncus, lorem non
+        condimentum vulputate, dui est congue nisl, vel porta nulla metus id justo. Nam eu lectus tempor, viverra neque
+        vitae, congue quam. Mauris imperdiet libero ac odio suscipit, eget vestibulum nunc sagittis.
+
+        Fusce elit lectus, suscipit eu tortor eu, dictum tempus tellus. Lorem ipsum dolor sit amet, consectetur
+        adipiscing elit. Aliquam et eleifend odio. Suspendisse dapibus sem eget metus scelerisque ullamcorper. Sed in
+        eros posuere, finibus dui vulputate, tempus lacus. Sed erat est, condimentum et ex non, sollicitudin laoreet
+        lorem. Cras a feugiat est, a malesuada neque. Etiam fringilla risus dolor, sit amet mollis mi efficitur quis.
+        Etiam nec porta justo. Morbi felis libero, tempor ac congue sed, venenatis et erat. Vestibulum blandit lorem
+        vitae arcu dignissim rutrum.
+
+        Donec posuere placerat massa, viverra elementum quam convallis nec. Praesent quis lacus pellentesque, consequat
+        orci ac, convallis nisl. Vestibulum finibus ac lacus vel feugiat. Maecenas aliquet tristique augue, eu sodales
+        nulla pharetra nec. Nunc mauris lorem, ultrices nec consectetur id, venenatis et tortor. Proin ac condimentum
+        nisl, nec dictum nulla. Mauris pharetra tortor quam, at tincidunt velit molestie eu. Donec elementum elit
+        consequat enim mattis, id suscipit elit dignissim. Donec malesuada imperdiet augue, non euismod lectus. Mauris
+        pharetra elit urna, sed consequat ipsum euismod at. Etiam nec consequat augue, eget egestas turpis. Cras
+        interdum mauris mi, nec dapibus lorem congue vel. Pellentesque mollis risus vitae sem gravida dictum.
+
+        Donec rutrum ex at turpis auctor lacinia. Donec et massa est. Quisque erat mauris, ultricies non turpis quis,
+        hendrerit interdum ipsum. Curabitur mollis auctor lorem sit amet tristique. Cras tempus non lectus a egestas. Ut
+        a facilisis neque. Fusce sed lectus at diam auctor molestie vel ac velit. Fusce pulvinar dui vel felis lobortis
+        malesuada. Nulla placerat est risus, eu dictum libero sollicitudin id. Mauris dictum aliquet tortor id maximus.
+        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id dui sagittis,
+        semper odio vel, mattis dui. Nulla pharetra tincidunt diam, eget vulputate risus vehicula at. Phasellus
+        tincidunt blandit massa, maximus sollicitudin nulla sollicitudin vitae.
+
+        Nunc finibus sollicitudin aliquam. Nullam finibus velit sed arcu commodo, id tempor mi placerat. Nulla nec nunc
+        eleifend, lobortis lorem scelerisque, semper nisi. In sit amet metus vel urna eleifend maximus in eget ante.
+        Fusce hendrerit lectus libero, eget feugiat eros tincidunt dignissim. Praesent diam eros, tristique et elementum
+        vitae, accumsan eu erat. Phasellus urna leo, semper vitae ligula sit amet, tristique bibendum mi.
     </div>
 {% endblock %}