ccc-basel/chaostreff.ch
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix responsive wrapping and collapsing of navbar

Browse source
This commit is contained in:
s3lph 2023-01-04 04:26:43 +01:00
parent e79b7774af
commit 57139eedc8
Signed by: s3lph
GPG key ID: 8AC98A811E5BEFF5
1 changed files with 33 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/index.html
View file

@ -15,14 +15,18 @@
<script src="chaostreff.js"></script> <script src="chaostreff.js"></script>
</head> </head>
<body> <body>
<header class="navbar navbar-expand-sm navbar-dark bg-dark"> <header class="navbar navbar-expand-lg navbar-dark bg-dark">
<nav class="container-fluid"> <nav class="container-fluid">
<a class="navbar-brand" href="#">{{ h_pagetitle }}</a> <a class="navbar-brand" href="#">{{ h_pagetitle }}</a>
<ul class="navbar-nav navbar-expand me-auto"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a href="#spaces" class="nav-link">{{ h_spaces }}</a></li> <li class="nav-item"><a href="#spaces" class="nav-link">{{ h_spaces }}</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">{{ h_contact }}</a></li> <li class="nav-item"><a href="#contact" class="nav-link">{{ h_contact }}</a></li>
<li class="nav-item me-auto"><a href="#services" class="nav-link">{{ h_services }}</a></li> <li class="nav-item"><a href="#services" class="nav-link">{{ h_services }}</a></li>
<li class="nav-item dropdown ms-auto"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbar-dropdown-language" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" id="navbar-dropdown-language" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-translate" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-translate" viewBox="0 0 16 16">
<!-- <!--
@ -36,13 +40,14 @@
</svg> </svg>
{{ h_language }} {{ h_language }}
</a> </a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end" aria-labelledby="navbar-dropdown-language"> <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbar-dropdown-language">
{% for language, name in languages.items() %} {% for language, name in languages.items() %}
<li><a rel="self" href="/{{ language }}" class="{% if language == lang %}active{% endif %} dropdown-item" alt="{{ name }}" title="{{ name }}">{{ name }}</a></li> <li><a rel="self" href="/{{ language }}" class="{% if language == lang %}active{% endif %} dropdown-item" alt="{{ name }}" title="{{ name }}">{{ name }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
</li> </li>
</ul> </ul>
</div>
</nav> </nav>
</header> </header>
<main class="container-fluid"> <main class="container-fluid">