From a31fc7361af9c6932d1bb337a719dabc86973ae3 Mon Sep 17 00:00:00 2001
From: David Beniamine <david.beniamine@tetras-libre.fr>
Date: Wed, 16 Feb 2022 00:21:29 +0100
Subject: [PATCH] Fix menu responsiveness
---
base.twig | 18 +++++++++---------
css/style.css | 8 ++------
2 files changed, 11 insertions(+), 15 deletions(-)
diff --git a/base.twig b/base.twig
index c8d9282..84f0aed 100644
--- a/base.twig
+++ b/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>
diff --git a/css/style.css b/css/style.css
index e1cfd11..f68377b 100644
--- a/css/style.css
+++ b/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; }
--
GitLab