@vuesax-alpha/nightly/theme-chalk/vs-navbar.css

A Component Library for Vue 3

.vs-navbar{--vs-color:var(--vs-background);--vs-navbar-z-index:var(--vs-z-index-top);--vs-navbar-color:rgba(var(--vs-text), 1);--vs-navbar-background:rgba(var(--vs-color), 1);--vs-navbar-border-radius:0px 0px 15px 15px}.vs-navbar{width:100%;position:absolute;z-index:var(--vs-navbar-z-index);top:0;left:0;width:100%;border-radius:var(--vs-navbar-border-radius);background:var(--vs-navbar-background);transition:var(--vs-transition-ease);color:var(--vs-navbar-color)}.vs-navbar.is-padding-scroll:not(.is-padding-scroll-active){padding-top:20px;padding-bottom:20px}.vs-navbar.is-padding-scroll:not(.is-padding-scroll-active) .vs-navbar__group--items{margin-bottom:-30px}.vs-navbar.is-square{border-radius:0}.vs-navbar.is-text-white{color:#fff}.vs-navbar.is-text-white .vs-navbar__line{background:#fff}.vs-navbar.is-text-white .vs-navbar__item:before{background:#fff}.vs-navbar.is-fixed{position:fixed!important}.vs-navbar.is-shadow,.vs-navbar.is-shadow-active{box-shadow:0 0 25px 0 rgba(0,0,0,var(--vs-shadow-opacity))}.vs-navbar.is-hidden{transform:translate(0,-100%)}.vs-navbar.is-not-line .vs-navbar-group::after,.vs-navbar.is-not-line .vs-navbar-item::after{display:none}.vs-navbar.is-not-line .vs-navbar-group::before,.vs-navbar.is-not-line .vs-navbar-item::before{display:none}.vs-navbar__content{width:100%;position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 15px;box-sizing:border-box;min-height:44px}.vs-navbar__left{display:flex;justify-content:flex-start;align-items:center}.vs-navbar__right{display:flex;justify-content:flex-end;align-items:center}.vs-navbar__center{display:flex;justify-content:center;align-items:center}