Commit b5bb12b8 authored by Jelle Besseling's avatar Jelle Besseling Committed by Sébastiaan Versteeg

Merge branch 'fix/header-iphone-5s' into 'master'

Improve usability of header on mobile devices

Closes #762

See merge request !1046

(cherry picked from commit eda83c33)

e2a59dac Improve usability of header on mobile devices
parent 8e56c6ab
#accentbar {
position: -webkit-sticky;
position: sticky;
background: $preset;
height: 5px;
top: 0;
z-index: 1020;
}
.navbar {
position: -webkit-sticky;
position: sticky;
font-size: 16px;
background-color: $white;
border-bottom: 1px solid $grey;
top: 5px;
z-index: 1020;
> .container {
justify-content: end;
......@@ -95,7 +102,7 @@
}
}
@media(max-width: 1200px) {
@media(max-width: 1199px) {
.navbar {
.navbar-brand {
img {
......@@ -105,6 +112,23 @@
}
}
@media(max-width: 767px) {
#accentbar, .navbar {
position: relative;
top: 0;
}
}
@media(max-width: 359px) {
.navbar {
.navbar-brand {
img {
max-height: 3rem;
}
}
}
}
#page-header {
height: 200px;
......
......@@ -64,9 +64,9 @@
{% include "announcements/announcement.html" with announcements=announcements %}
</section>
<div id="accentbar" class="sticky-top"></div>
<div id="accentbar"></div>
<nav class="navbar navbar-expand-lg sticky-top">
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="{% url 'index' %}">
<img
......
Markdown is supported
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