Skip to content
Snippets Groups Projects
Verified Commit 3d5cbf7e authored by Nik | Klampfradler's avatar Nik | Klampfradler
Browse files

Make navbar responsive

parent a1075c79
No related branches found
No related tags found
1 merge request!28Neue Website basierend auf Zola
Hide whitespace changes
Inline Side-by-side
sass/menu.scss 0 → 100644
+ 30
− 0
View file @ 3d5cbf7e
// https://codepen.io/Nikitoss334/details/KLxaJK
// FIXME clarify license
.navbar-toggle {
display: none;
}
.navbar .navbar-toggle:checked {
&+.navbar-brand .navbar-burger {
& span:nth-child(1) {
-webkit-transform: translateY(5px) rotate(45deg);
transform: translateY(5px) rotate(45deg);
}
& span:nth-child(2) {
opacity: 0;
}
& span:nth-child(3) {
-webkit-transform: translateY(-5px) rotate(-45deg);
transform: translateY(-5px) rotate(-45deg);
}
}
&~.navbar-menu {
@media screen and (max-width: 1024px) {
display: block;
}
}
}
\ No newline at end of file
sass/style.scss
+ 2
− 0
View file @ 3d5cbf7e
......@@ -3,3 +3,5 @@
$family-sans-serif: "Roboto", sans-serif;
@import "../node_modules/bulma/bulma.sass";
@import "./menu.scss"
templates/base.html
+ 1
− 37
View file @ 3d5cbf7e
......@@ -18,43 +18,7 @@
<body class="has-navbar-fixed-top">
<header>
<nav class="navbar is-fixed-top is-transparent" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a href="{{ get_url(path="@/_index.md") }}" class="navbar-item">{{ config.title }}</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a href="#" class="navbar-item">Projekte</a>
<div class="navbar-dropdown">
TBA
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a href="#" class="navbar-item">Informationen für…</a>
<div class="navbar-dropdown">
TBA
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a href="#" class="navbar-item">Teckids-Gemeinschaft</a>
<div class="navbar-dropdown">
TBA
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a href="#" class="navbar-item">Updates</a>
<div class="navbar-dropdown">
TBA
</div>
</div>
</div>
</div>
</nav>
{% include "menu.html" %}
</header>
<main>
......
templates/menu.html 0 → 100644
+ 46
− 0
View file @ 3d5cbf7e
<nav class="navbar is-fixed-top is-transparent" role="navigation" aria-label="main navigation">
<input type="checkbox" id="burger-toggle" role="button" class="navbar-toggle" aria-label="menu" aria-expanded="false" data-target="main-menu" />
<div class="navbar-brand">
<a href="{{ get_url(path="@/_index.md") }}" class="navbar-item">
{{ config.title }}
</a>
<label for="burger-toggle" class="navbar-burger">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</label>
</div>
<div class="navbar-menu" id="main-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a href="#" class="navbar-item">Projekte</a>
<div class="navbar-dropdown">
TBA
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a href="#" class="navbar-item">Informationen für…</a>
<div class="navbar-dropdown">
TBA
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a href="#" class="navbar-item">Teckids-Gemeinschaft</a>
<div class="navbar-dropdown">
TBA
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a href="#" class="navbar-item">Updates</a>
<div class="navbar-dropdown">
TBA
</div>
</div>
</div>
</div>
</nav>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment