ivooskamp/backupchecks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Force navbar collapse on split-screen desktop widths

Browse Source
This commit is contained in:
Ivo Oskamp 2026-02-23 14:52:44 +01:00
parent 40ffe3656e
commit 2cd704182c
2 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
containers/backupchecks/src/static/css/layout.css
View File

@ -89,6 +89,27 @@ main.dashboard-container {
}
/* Navbar responsive behavior for split-screen/half-width desktop layouts */
@media (max-width: 2200px) {
/* Force collapsed navbar mode for split-screen desktop usage */
.navbar.navbar-force-collapse .navbar-toggler {
display: block !important;
}
.navbar.navbar-force-collapse .navbar-collapse {
display: none !important;
width: 100%;
flex-basis: 100%;
}
.navbar.navbar-force-collapse .navbar-collapse.show {
display: block !important;
}
.navbar.navbar-force-collapse .navbar-nav {
flex-direction: column !important;
}
}
@media (max-width: 1399.98px) {
.navbar .navbar-collapse {
align-items: stretch;

2
containers/backupchecks/src/templates/layout/base.html
View File

@ -59,7 +59,7 @@
</div>
{% endif %}
<nav class="navbar navbar-expand-xxl fixed-top bg-body-tertiary border-bottom">
<nav class="navbar navbar-expand-xxl navbar-force-collapse fixed-top bg-body-tertiary border-bottom">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('main.dashboard') }}">Backupchecks</a>
<button