Steev/steevcss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated Navbar option fixed position

Browse Source 
Navbar position will now be fixed by class and wont be forced on top
This commit is contained in:
Steev
2022-03-15 13:23:56 +01:00
parent d4a0cb45ef
commit eecee7f917
11 changed files with 116 additions and 773 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
dist/b8b1bea874564009706fb4e931edb7df.css vendored
View File

@@ -1,121 +1 @@
header {
background: #f1f1f1;
text-align: center;
position: fixed;
height: 30px;
z-index: 999;
width: 100%;
height: auto;
top: 0;
padding: 10px; }
.nav-toggle {
display: none; }
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center; }
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: 2px;
width: 2em;
border-radius: 2px; }
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute; }
.nav-toggle-label span::before {
bottom: 30px; }
.nav-toggle-label span::after {
top: 30px; }
nav {
position: absolute;
text-align: left;
top: 100%;
width: 100%;
left: 0;
background: #f1f1f1;
display: none;
transform: scale(1, 0);
transform-origin: top;
transition: 400ms;
transition: transform 400ms ease-in-out; }
nav ul {
margin: 0;
padding: 0;
list-style-type: none; }
nav li {
margin-bottom: 1em;
margin-left: 1em; }
nav a {
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
color: #2e2e2e;
opacity: 0; }
nav a:hover {
color: #a5a5a5; }
.nav-toggle:checked ~ nav {
display: block;
transform: scale(1, 1);
transition: 400ms; }
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 150ms ease-in-out; }
@media screen and (min-width: 800px) {
.nav-toggle-label {
display: none; } }
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr; }
nav {
all: unset;
display: flex;
align-items: center; }
nav a {
opacity: 1; }
nav ul {
display: flex; }
nav li {
margin-left: 1em;
margin-bottom: 0;
list-style: none; }
.nav-logo-left {
grid-column: 2 / span 1; }
.nav-left {
all: unset;
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center; }
.nav-left ul {
display: flex;
justify-content: flex-end; }
header{background:#f1f1f1;text-align:center;height:30px;z-index:1;width:100%;height:auto;padding:10px}.locked-top{top:0;position:fixed}.nav-toggle{display:none}.nav-toggle-label{position:absolute;top:0;left:0;margin-left:1em;height:100%;display:flex;align-items:center}.nav-toggle-label span,.nav-toggle-label span:after,.nav-toggle-label span:before{display:block;background:#fff;height:2px;width:2em;border-radius:2px}.nav-toggle-label span:after,.nav-toggle-label span:before{content:"";position:absolute}.nav-toggle-label span:before{bottom:30px}.nav-toggle-label span:after{top:30px}.nav-locked{top:100%;left:0;position:absolute}nav{text-align:left;width:100%;background:#f1f1f1;display:none;transform:scaleY(0);transform-origin:top;transition:.4s;transition:transform .4s ease-in-out}nav ul{margin:0;padding:0;list-style-type:none}nav li{margin-bottom:1em}nav a{text-decoration:none;font-size:1.2rem;text-transform:uppercase;color:#2e2e2e;opacity:0}nav a:hover{color:#a5a5a5}.nav-toggle:checked~nav{display:block;transform:scale(1);transition:.4s}.nav-toggle:checked~nav a{opacity:1;transition:opacity .15s ease-in-out}@media screen and (min-width:800px){.nav-toggle-label{display:none}}header{display:grid;grid-template-columns:1fr auto minmax(600px,1fr) 1fr}nav{all:unset;display:flex;align-items:center}nav a{opacity:1}nav ul{display:flex}nav li{margin-left:1em;margin-bottom:0;list-style:none}.nav-logo-left{grid-column:2/span 1}.nav-left{all:unset;grid-column:3/4;align-items:center}.nav-left,.nav-left ul{display:flex;justify-content:flex-end}.sidebar-wrapper{display:flex}.sidebar-wrapper .sidebar-content{width:100%}.sidebar-wrapper .sidebar-left{padding:0;margin:0;margin-left:0;padding-right:5px;height:100%}.sidebar-wrapper .sidebar-left .sidebar-menu ul{width:fit-content}.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-title{width:max-content;font-size:20pt;padding-right:5px}.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-item li{width:fit-content;color:#2980b9;text-decoration:none;font-size:12pt}