Fix menu responsiveness

base.twig

@@ -27,8 +27,8 @@
 <body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>
 
     <header id="top" role="banner">
-            <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end sticky">
-                <a id="logo" class="navbar-brand" href="{{ "index"|link }}">
+            <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end sticky d-flex flex-row flex-wrap">
+                <a id="logo" class="navbar-brand flex-grow-1" href="{{ "index"|link }}">
                     <img style="height:100px;min-width:130px;" src="{{ pages["_meta"].meta.logo|url }}" alt="{{ site_title }}">
                     <span>{{ pages["_meta"].meta.tagline|markdown }}</span>
                 </a>
@@ -37,7 +37,7 @@
                 </button>
                     
                 <div class="collapse navbar-collapse flex-grow-0 ml-auto" id="navbarsExample03">
-                        <ul class="navbar-nav mr-auto">
+                        <ul class="navbar-nav mr-auto flex-row flex-wrap justify-content-end">
                             {% set tags = get_all_tags() %}
                             {% for page in pages if page.title %}
                                 {% if parentPage and not (page.id starts with parentPage) %}
@@ -48,22 +48,22 @@
 
                                 {% set pageDepth = page.id|split('/')|length %}
                                 {% if pageDepth == 1 %}
-                                    <li class="{% if page.id == current_page.id %} active{% endif %} nav-link">
+                                    <li class="{% if page.id == current_page.id %} active{% endif %} nav-link mr-2 ml-2">
                                         <a href="{{ page.url }}">{{ page.title }}</a>
                                     </li>
                                 {% elseif (pageDepth == 2) and (page.id ends with "/index") %}
                                     {% set parentPage = page.id|slice(0, -5) %}
-                                    <li class="{% if page.id == current_page.id %} active{% endif %} dropdown show nav-link">
+                                    <li class="{% if page.id == current_page.id %} active{% endif %} dropdown show nav-link mr-2 ml-2">
                                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ page.title }}</a>
-                                    <ul class="dropdown-menu">
+                                    <ul class="dropdown-menu dropdown-menu-right">
                                     {% if page.title == 'Blog' %}
-                                        <li class="nav-link"><a href="{{base_url}}/blog">Tous les articles</a></li>
+                                        <li class="nav-link ml-1 mr-1"><a class="ml-2" href="{{base_url}}/blog">Tous les articles</a></li>
                                         {% for tag in tags|sort %}
-                                        <li class="nav-link"><a href="{{base_url}}/blog/?tag={{ tag }}">{{ tag }}</a></li>
+                                        <li class="nav-link ml-1 mr-1"><a class="ml-2" href="{{base_url}}/blog/?tag={{ tag }}">{{ tag }}</a></li>
                                         {% endfor %}
                                     {% endif %}
                                 {% elseif (pageDepth == 2) and parentPage %}
-                                    <li class="nav-link"><a href="{{ page.url }}">{{ page.title }}</a></li>
+                                    <li class="nav-link ml-1 mr-1"><a class="ml-2" href="{{ page.url }}">{{ page.title }}</a></li>
                                 {% endif %}
                             {% endfor %}
                             </ul>

css/style.css

@@ -70,10 +70,8 @@ body { display: flex; flex-direction: column; }
 #title * { margin: 0; color: #41B171; }
 #title p { font-style: italic; }
 
-#logo img { float:left; }
-#logo p {clear: both; }
+#logo img { float:left; clear:both; }
 
-#logo + #title h1 { margin: 0.8rem 0; }
 #logo + #title.tagline h1 { margin: 0; }
 
 #top {
@@ -84,13 +82,11 @@ body { display: flex; flex-direction: column; }
 }
 #top ul li {
     display: block;
-    margin-left: 1em;
-    padding: 0;
     font-weight: bold;
 }
 
 #top ul.dropdown-menu {
-    max-width: 50%;
+    position: absolute;
 }
 
 a#logo, #top a, #nav-toggle { color: #556d5f; }