Repaired the menu, clead the code

customize.dist/pages.js

@@ -77,25 +77,19 @@ define([
     };
 
     var infopageTopbar = function () {
-        return h('div.cp-topbar',
-            h('div',
-                h('a.navbar-brand', { href: 'index.html'}, [
-                    h( 'img', { src: '/customize/CryptPad-white-logo.svg' })
-            ])
-            ),
-            h('div.navbar.navbar-toggleable-md.navbar-light.navbar-inverse',
-                h('button.navbar-toggler.navbar-toggler-right', {'type':'button'}, {'data-toggle':'collapse'}, {'data-target':'#menuCollapse'}, {'aria-controls': 'menuCollapse'}, {'aria-expanded':'false'}, {'aria-label':'Toggle navigation'},
+        return h('nav.navbar.navbar-toggleable-md',
+                     h('button.navbar-toggler.navbar-toggler-right', {'type':'button'}, {'data-toggle':'collapse'}, {'data-target':'#menuCollapse'}, {'aria-controls': 'menuCollapse'}, {'aria-expanded':'false'}, {'aria-label':'Toggle navigation'},
                     [h('i.fa.fa-bars ')
                     ]),
-                h('div.collapse.navbar-collapse.justify-content-end.flex-column#menuCollapse', [  
+                    h('a.navbar-brand', { href: '/'}),
+                h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [  
                     h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.topbar_whatIsCryptpad),
                     h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, Msg.blog),
                     h('a.nav-item.nav-link', { href: '/contact.html'}, Msg.contact),
                     h('a.nav-item.nav-link', { href: '/about.html'}, Msg.about),
-                    h('a.cp-login-btn', { href: '/login'}, Msg.login_login),
-                    h('a.cp-register-btn', { href: '/register'}, Msg.login_register)
+                    h('a.nav-item.nav-link.cp-login-btn', { href: '/login'}, Msg.login_login),
+                    h('a.nav-item.nav-link.cp-register-btn', { href: '/register'}, Msg.login_register)
                 ])
-            )
         );
     };
 
@@ -280,9 +274,11 @@ define([
                                         if (showingMore) {
                                             $('.cp-more, .cp-callout-more-lessmsg').addClass('cp-hidden');
                                             $('.cp-callout-more-moremsg').removeClass('cp-hidden');
+                                            if ( $( window ).width() >991 ) $('.navbar').css('margin-top','-1em');
                                         } else {
                                             $('.cp-more, .cp-callout-more-lessmsg').removeClass('cp-hidden');
                                             $('.cp-callout-more-moremsg').addClass('cp-hidden');
+                                            $('.navbar').css('margin-top','0');
                                         }
                                         showingMore = !showingMore;
                                     }

customize.dist/src/less2/pages/page-index.less

@@ -62,43 +62,39 @@
         //font-style: italic;
     }
 }
-.cp-topbar { 
-    //position: absolute;
-    background: transparent;
-    a {
-        color: #fff;
-        padding: 0.5em 0.5em 0.5em 0.5em;
+.navbar {
+    width: 100%;
+    margin-top: -1em;
+    @media only screen and (max-device-width: 991px) {
+        margin-top: 0;
     }
-    button:focus {
-        outline: none;
+    .navbar-brand {
+        background: url(/customize/CryptPad-white-logo.svg) no-repeat;
+        width: 250px;
+        height: 50px;
     }
-    .collapse {
-        a {
-            display: block;
-        }
+    a {
+        color: #fff;
+        border: 2px solid transparent;
+        &:visited {
+            color: rgba(255,255,255,.8);
+        };
     }
-    .navbar-toggler-left {
-        top: -0.59rem;
+    .nav-link {
+        padding: 0.5em 0.7em;
+        &:hover {
+            transform: scale(1.05);
+        };
     }
-    .cp-left {
-        .fa-bars {
-            font-size: 1.6rem;
-        }
+    .cp-register-btn {
+            border: 2px solid #fff;
     }
-    a.cp-logo {
-        display: none;
-    }
-    img {
-        height: 5vh;
-        margin-top: -4px;
+    button:focus {
+        outline: none;
     }
-    &:hover {
-        img {
-            transform: none;
-        }
-    };
-    a.cp-logo {
-        display: none;
+    .navbar-toggler {
+        margin-top: 10px;
+        color: #fff;
     }
 }
 @callout-padding: 15px;
@@ -119,9 +115,9 @@ a:hover {
         color: black;
         &:hover { text-decoration-line: none; }
     }
-    div {
+    div h4 {
         @media only screen and (min-device-width: 576px) and (max-device-width: 767px) {
-            left: 4.5em !important;
+            font-size: 1.3em;
         }
     }
 }
@@ -192,11 +188,6 @@ h4 {
         }
     }
 }
-.navbar-inverse .navbar-toggler {
-    border-color: transparent;
-    margin-top: -12px;
-    padding: 0;
-}
 @media (min-width: 576px) and (max-width: 767px) {
     .container {
         padding-left: 0;
@@ -208,22 +199,25 @@ h4 {
 }
 @media (max-width: 991px) {
     #menuCollapse {
-        /*position: absolute;
-        left: -131px;*/
-        margin-top: 0.5em;
-        text-align: right;
-    }
-    #menuCollapse a {
-        width: 100%;
         text-align: right;
     }
     .navbar-nav a {
         text-align: right !important;
     }
-    .cp-right .cp-login-btn {
-        padding: 0.5em;
+    .cp-register-btn {
+        margin-right: 13px;
+        margin-left: 83vw;
+        text-align: center;
+     }
+}
+@media (max-width: 687px) {
+    .cp-register-btn {
+         margin-left: 75vw;
     }
 }
-.collapsing a {
-    text-align: right !important;
+@media (max-width: 467px) {
+    .cp-register-btn {
+         margin-left: 63vw;
+    }
 }
+