on améliore l'apparence du menu
This commit is contained in:
parent
2fafc092a2
commit
716748a487
@ -93,7 +93,7 @@ details[role="list"] summary + ul li.selected>a:hover {
|
||||
color: var(--primary-inverse);
|
||||
}
|
||||
|
||||
body>nav {
|
||||
#main-nav {
|
||||
box-shadow: 0 1px 0 rgba(115, 130, 140, 0.2);
|
||||
}
|
||||
|
||||
@ -425,8 +425,15 @@ nav>div {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav#main {
|
||||
align-content: flex-start;
|
||||
#main-nav {
|
||||
display: block;
|
||||
>nav {
|
||||
position: absolute;
|
||||
float: left;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-right: 4em;
|
||||
}
|
||||
|
||||
ul, div {
|
||||
margin: 0 0 auto 0;
|
||||
@ -436,9 +443,12 @@ nav#main {
|
||||
|
||||
/* header */
|
||||
.header {
|
||||
float: left;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header ul {
|
||||
@ -446,11 +456,16 @@ nav#main {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.header ul li {
|
||||
clear: both;
|
||||
float: right;
|
||||
padding: .4em .8em;
|
||||
width: 100%;
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
@ -555,6 +570,7 @@ nav#main {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
@ -25,7 +25,18 @@
|
||||
{% load event_extra %}
|
||||
{% load utils_extra %}
|
||||
<body>
|
||||
<nav id="main" class="container-fluid">
|
||||
<div id="main-nav">
|
||||
<div class="header">
|
||||
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
||||
<label class="menu-icon" for="menu-btn">{% picto_from_name "menu" %}</label>
|
||||
<ul class="menu">
|
||||
<li><a href="{% url 'event_search' %}">Rechercher {% picto_from_name "search" %}</a></li>
|
||||
<li><a href="{% url 'aujourdhui' %}">Aujourd'hui</a></li>
|
||||
<li><a href="{% url 'cette_semaine' %}">Cette semaine</a></li>
|
||||
<li><a href="{% url 'ce_mois_ci' %}">Ce mois-ci</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<nav class="container-fluid">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{% url 'home' %}" aria-label="Retour accueil">
|
||||
@ -37,17 +48,8 @@
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<div class="header">
|
||||
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
||||
<label class="menu-icon" for="menu-btn">{% picto_from_name "menu" %}</label>
|
||||
<ul class="menu">
|
||||
<li><a href="{% url 'event_search' %}">Rechercher {% picto_from_name "search" %}</a></li>
|
||||
<li><a href="{% url 'aujourdhui' %}">Aujourd'hui</a></li>
|
||||
<li><a href="{% url 'cette_semaine' %}">Cette semaine</a></li>
|
||||
<li><a href="{% url 'ce_mois_ci' %}">Ce mois-ci</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="container{% block main-fluid %}{% endblock %}">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
|
Loading…
Reference in New Issue
Block a user