diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius index 987e9885c..2e531867a 100644 --- a/templates/widgets/navbar.lucius +++ b/templates/widgets/navbar.lucius @@ -22,6 +22,7 @@ } .navbar__logo { + transition: all .2s ease; &::before { content: 'UniWorkY'; @@ -32,6 +33,23 @@ } } +@media (max-width: 768px) { + + .navbar__logo { + transform: scale(0.7, 0.7); + transform-origin: left; + position: absolute; + } +} + +@media (max-width: 500px) { + + .navbar__logo { + left: 20px; + transform: scale(0.3, 0.3); + } +} + .navbar__list { align-self: flex-end; white-space: nowrap; @@ -55,12 +73,12 @@ margin-left: auto; } -.navbar .navbar__link-wrapper { +.navbar__link-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; - height: 80px; + height: var(--header-height); color: var(--color-lightwhite); transition: height .2s ease; } @@ -115,23 +133,32 @@ z-index: 100; .navbar__link-wrapper { - height: 50px; + height: var(--header-height-collapsed); } - - .breadcrumbs__container { - margin-bottom: 7px; - } - } + .navbar--animated { transition: all .2s ease; } + .navbar__pushdown { - /*display: none;*/ height: var(--header-height); transition: height .2s ease; } + .navbar--sticky + .navbar__pushdown { display: block; height: var(--header-height-collapsed); } + +@media (max-width: 768px) { + + .navbar, + .navbar__pushdown { + height: var(--header-height-collapsed); + } + + .navbar__link-wrapper { + height: var(--header-height-collapsed); + } +}