.navbar { position: fixed; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; height: var(--header-height); padding-right: 5vw; padding-left: 90px; background: var(--darkerbase); /* Old browsers */ background: -moz-linear-gradient(bottom, var(--darkerbase) 0%, #425d79 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(bottom, var(--darkerbase) 0%,#425d79 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to top, var(--darkerbase) 0%,#425d79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: white; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); z-index: 10; top: 0; left: 0; overflow: hidden; transition: height 0.2s ease; } .navbar__list { align-self: flex-end; white-space: nowrap; } .navbar__list-item { position: relative; transition: background-color .1s ease; .glyphicon { position: relative; width: 100%; height: 20px; } .glyphicon::before { height: 20px; } } .navbar :last-child { margin-left: auto; } .navbar .navbar__link-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 80px; color: var(--whitebase); transition: height .2s ease; } .navbar__link-label { transition: opacity .2s ease; padding: 0 13px; color: white; text-transform: uppercase; } .navbar__list-item--secondary { margin-left: 20px; color: var(--greybase); } .navbar__list-item--secondary + .navbar__list-item--secondary { margin-left: 0; border-left: 0; } .navbar__list-item--active { background-color: white; color: var(--darkbase); .navbar__link-wrapper { color: var(--darkbase); } } .navbar__list-item--active .navbar__link-wrapper { pointer-events: none; } .navbar__list-item--active .navbar__link-label { color: var(--darkbase); } .navbar .navbar__list-item:not(.navbar__list-item--active):hover { background-color: var(--darkerbase); } .navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper { color: var(--whitebase); } .navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-label { color: var(--whitebase); } .navbar__list-item--secondary .navbar__link-wrapper, .navbar__list-item--secondary .navbar__link-label { color: var(--greybase); } .navbar--sticky { height: var(--header-height-collapsed); z-index: 100; .navbar__link-wrapper { height: 50px; } .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); }