Restore (mobile) menu structure

scipost/static/scipost/assets/css/_nav.scss

@@ -80,29 +80,19 @@ nav.submenu {
     border-radius: 0;
     border-top: 1px solid #fff;
     border-bottom: 1px solid #ddd;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    overflow-x: scroll;
 
     .item {
-        padding: 0.1rem 0.5rem;
+        padding: 0 0.5rem;
         white-space: nowrap;
         display: block;
+        border-right: 2px solid #fff;
     }
     .item:first-child,
     .item:last-child {
         border-right: 0;
     }
 }
-
-@media (min-width: 768px) {
-    nav.submenu {
-        display: flex;
-        flex-wrap: nowrap;
-        flex-direction: row;
-
-        .item {
-            padding-top: 0;
-            padding-bottom: 0;
-            display: inline;
-            border-right: 2px solid #fff;
-        }
-    }
-}

scipost/static/scipost/assets/css/_navbar.scss

@@ -4,8 +4,9 @@
  */
 .navbar {
     margin-bottom: 1.5rem;
-    display: block;
+    display: flex;
     flex-wrap: nowrap;
+    overflow-x: scroll;
 
     &.main-nav {
         border-bottom: 1px solid #ddd;
@@ -35,16 +36,18 @@
     .highlighted > .nav-link {
         background-color: rgba(255, 255, 255, 0.6);
     }
+
+    .navbar-nav {
+        display: flex;
+        flex-direction: row;
+    }
 }
 
 @media (min-width: 768px) {
     .navbar {
-        display: flex;
 
         .navbar-nav {
             margin-right: auto;
-            display: flex;
-            flex-direction: row;
         }
 
         .nav-item {

scipost/templates/scipost/navbar.html

@@ -4,7 +4,7 @@
 
 
 <nav class="navbar navbar-light main-nav navbar-expand-lg">
-    <ul id="menu-navbar" class="navbar-nav collapse">
+    <ul id="menu-navbar" class="navbar-nav">
       <li class="nav-item{% if request.path == '/' %} active{% endif %}">
         <a href="{% url 'scipost:index' %}" class="nav-link">Home</a>
       </li>
@@ -69,7 +69,6 @@
       {% endif %}
 
     </ul>
-    <a class="btn btn-block my-2" data-toggle="collapse" href="#menu-navbar" aria-expanded="false" aria-controls="menu-navbar">Show menu <i class="fa fa-angle-down" aria-hidden="true"></i></a>
     <form action="{% url 'scipost:search' %}" method="get" class="form-inline search-nav-form">
         <input class="form-control" id="id_q" maxlength="100" name="q" type="text" required="required" value="{{search_query|default:''}}">
         <input class="btn btn-secondary" type="submit" value="Search">