130 lines
2.4 KiB
CSS
130 lines
2.4 KiB
CSS
/*
|
|
CSS für den Block Navbar mit seinen Elementen nach BEM
|
|
*/
|
|
.nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #333d43;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.nav__left,
|
|
.nav__right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav__logo img {
|
|
height: 3rem;
|
|
}
|
|
|
|
.nav__center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav__item {
|
|
position: relative;
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
.nav__dropdown-toggle {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
padding: 0.5rem 1rem;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav__dropdown-menu {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
background: #f9f9f9;
|
|
min-width: 12rem;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,.15);
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.nav__dropdown-menu a {
|
|
padding: 0.5rem 1rem; /* Abstand um den Text */
|
|
color: #333;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav__link {
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0.5rem 1rem;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav__button {
|
|
display: inline-block;
|
|
background: #fff;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
color: #333;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.nav__search {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 4px; /* Abgerundete Ecken */
|
|
background: #fff;
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
.nav__dropdown:hover .nav__dropdown-menu {
|
|
display: block;
|
|
}
|
|
|
|
/* Responsive Anpassung ab 1210px und darunter */
|
|
@media (max-width: 1210px) {
|
|
.nav {
|
|
flex-wrap: wrap; /* zweite Nav-Zeile*/
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.nav__left {
|
|
order: 1;
|
|
flex: 1; /* Nimmt den Platz links ein */
|
|
}
|
|
|
|
.nav__right {
|
|
order: 2;
|
|
flex: 1;
|
|
justify-content: flex-end; /* schiebt Buttons nach ganz rechts */
|
|
}
|
|
|
|
.nav__center {
|
|
order: 3;
|
|
flex-basis: 100%; /* Erzwingt, dass dieses Element eine eigene Zeile einnimmt */
|
|
justify-content: center; /* Zentriert die Links in der zweiten Zeile */
|
|
padding: 0.5rem 0;
|
|
border-top: 1px solid rgba(255,255,255,0.1); /* Optionale Trennlinie */
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.nav__item {
|
|
margin: 0.25rem;
|
|
}
|
|
}
|
|
|
|
#mobile-nav {
|
|
display: none;
|
|
} |