Kod HTML:
<nav>
<div id="0" class="nav-logo">
<div class="text">LogoIpsum</div>
</div>
<div class="nav-button"></div>
<div class="nav-button"></div>
<div class="nav-button"></div>
<div id="1" class="nav-button">
<div class="text">O nas</div>
</div>
<div id="2" class="nav-button">
<div class="text">Projekty</div>
</div>
<div id="3" class="nav-button">
<div class="text">Wsparcie</div>
</div>
<div id="4" class="nav-button">
<div class="text">Kontakt</div>
</div>
<div id="5" class="nav-button">
<div class="text">Sponsorzy</div>
</div>
<div class="nav-end">
<div class="text">Blog.</div>
</div>
</nav>
Kod CSS:
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 10.5vh;
background-color: rgba(0, 0, 0, 0);
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(12, 1fr);
color: white;
overflow: visible;
z-index: 2;
transition: all 300ms ease;
}
nav:hover {
background-color: white;
color: black;
/*transition: all 300ms ease; */
box-shadow: 0px 1px 3px 0px rgba(12, 31, 81, 0.75);
}
.nav-active {
background-color: white;
color: black;
/*transition: all 300ms ease; */
box-shadow: 0px 1px 3px 0px rgba(12, 31, 81, 0.75);
}
nav:hover .nav-end {
border-left: 1px solid #E0E5F0;
opacity: 1.0;
/*transition: all 300ms ease; */
color: black;
}
.nav-end-active {
border-left: 1px solid #E0E5F0;
opacity: 1.0 !important;
/*transition: all 300ms ease; */
}
.nav-logo {
grid-area: 1 / 1 / 1 / 3;
color: inherit;
font-size: 2rem;
text-align: center;
background-color: inherit;
position: relative;
}
.nav-button {
color: inherit;
font-size: 1rem;
font-weight: 500;
background-color: inherit;
line-height: 100%;
/*transition: all 300ms ease; */
position: relative;
}
.nav-button:hover {
color: #29C9FF;
background-color: inherit;
/*transition: all 300ms ease; */
;
}
.nav-end {
background-color: inherit;
color: inherit;
grid-area: 1/11/1/13;
text-align: center;
font-size: 1.5rem;
position: relative;
opacity: 0.0;
white-space: nowrap;
}