1
0
mirror of https://github.com/tabler/tabler.git synced 2026-08-12 22:32:21 +04:00

sticky navbar

This commit is contained in:
codecalm
2019-07-01 21:01:00 +02:00
parent 8630c864e2
commit 48eaea52a0
5 changed files with 21 additions and 4 deletions
+1 -1
View File
@@ -53,6 +53,6 @@ changelog:
url: changelog.html
title: Changelog
icon: file-plus
label: v1.0.0
label: v1.0
+1 -1
View File
@@ -1,6 +1,6 @@
{% assign id = 0 | random_id %}
<div class="pb-3">
<a href="{{ site.base }}" class=" navbar-brand text-inherit">
<a href="{{ site.base }}" class="navbar-brand text-inherit">
<img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
<img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
</a>
+1 -1
View File
@@ -1,4 +1,4 @@
{% assign menu = page.menu | default: layout.menu %}
<div class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %}">
<div class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} navbar-sticky">
{% include layout/sidenav-content.html menu=menu %}
</div>
+1 -1
View File
@@ -1,4 +1,4 @@
<header class="navbar navbar-expand-md{% if include.dark %} navbar-dark{% endif %}">
<header class="navbar navbar-expand-md{% if include.dark %} navbar-dark{% endif %} navbar-sticky">
{% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark %}
</header>
+17
View File
@@ -234,6 +234,22 @@ Dark navbar
}
}
/**
Sticky navbar
*/
.navbar-sticky {
position: sticky;
top: 0;
z-index: 100;
&.navbar-side {
left: 0;
}
}
/**
Folded navbar
*/
.navbar-folded {
width: $sidenav-folded-width;
min-width: $sidenav-folded-width;
@@ -264,6 +280,7 @@ Dark navbar
width: 1.5rem;
font-size: px2rem(15px);
opacity: 1;
justify-content: center;
}
}