Bachelorthesis_Code/frontend/src/components/Navbar.css

150 lines
2.5 KiB
CSS
Raw Normal View History

.navbar {
2021-06-07 03:03:18 +00:00
background-color: var(--primary);
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar-container {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
max-width: 1500px;
}
.navbar-logo {
2021-06-07 03:03:18 +00:00
color: var(--secondary);
justify-self: start;
margin-left: 20px;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
display: flex;
align-items: center;
}
.nav-menu {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 10px;
list-style: none;
text-align: center;
width: 60vw;
justify-content: end;
margin-right: 2rem;
}
.nav-item {
height: 80px;
}
.nav-links {
2021-06-07 03:03:18 +00:00
color: var(--secondary);
display: flex;
align-items: center;
text-decoration: none;
padding: 0.5rem 1rem;
height: 100%;
}
.nav-links:hover {
border-bottom: 4px dotted var(--secondary);
transition: all 0.2s ease-out;
}
.nav-links-mobile {
display: none;
}
.menu-icon {
display: none;
}
@media screen and (max-width: 960px) {
.NavbarItems {
position: relative;
}
.nav-menu {
display: flex;
flex-direction: column;
width: 100%;
height: 90vh;
position: absolute;
top: 80px;
left: -100%;
opacity: 1;
transition: all 0.5s ease;
}
.nav-menu.active {
2021-06-07 03:03:18 +00:00
background: var(--primary);
left: 0;
opacity: 1;
transition: all 0.5s ease;
z-index: 1;
}
.nav-links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.nav-links:hover {
2021-06-07 03:03:18 +00:00
background-color: var(--secondary);
color: var(--primary);
border-radius: 0;
}
.navbar-logo {
position: absolute;
top: 0;
left: 0;
transform: translate(25%, 50%);
}
.menu-icon {
display: block;
position: absolute;
top: 0;
right: 0;
transform: translate(-100%, 60%);
font-size: 1.8rem;
cursor: pointer;
}
.fa-times {
2021-06-07 03:03:18 +00:00
color: var(--secondary);
font-size: 2rem;
}
.nav-links-mobile {
display: block;
text-align: center;
margin: 2rem auto;
border-radius: 4px;
width: 80%;
text-decoration: none;
font-size: 1.5rem;
background-color: transparent;
2021-06-07 03:03:18 +00:00
color: var(--primary);
padding: 14px 20px;
border: 1px solid var(--primary);
transition: all 0.3s ease-out;
}
.nav-links-mobile:hover {
2021-06-07 03:03:18 +00:00
background: var(--primary);
color: var(--secondary);
transition: 250ms;
}
}