diff --git a/css/navbar.css b/css/navbar.css index e4f8d96..19500f4 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -131,28 +131,27 @@ CSS für den Block Navbar mit seinen Elementen nach BEM @media (max-width: 660px) { .nav { - flex-direction: column; - padding: 10px; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + padding: 0 1rem; + } + + .nav_logo img { + height: 40px; } .nav__left { - order: 1; - width: 100%; - justify-content: center; - margin-bottom: 0.5rem; + order: 2; + flex: 1; + justify-content: flex-start; } .nav__right { - order: 2; + order: 3; width: 100%; display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; - } - - .nav__center { - display: none; /* Desktop aus*/ + margin-top: 0.5em; } #mobile-nav { @@ -168,14 +167,18 @@ CSS für den Block Navbar mit seinen Elementen nach BEM } .nav__search { - order: 2; - flex-grow: 1; /* restlichen Platz ausfüllen*/ + display: flex; + width: 100%; margin: 0; } + /* restliche desktop-navbar aus */ + .nav__center, + .nav__right .nav__button, .nav__right .nav__link { - display: none; /* restliche navbar aus */ + display: none; } + /* off canvas menu */ .nav__mobile-menu { display: flex;