/* vh-nav-breakpoint.css * Zeigt die mobile Burger-Navigation bis und mit 1045px an (statt erst ab dem * Bootstrap-Standard 767px). Ab 1046px erscheint das volle horizontale Menue. * * Das eigentliche Umschalten Burger <-> Menue kommt aus bootstrap.min.css beim * min-width:768px-Breakpoint; das restliche Header-/Navbar-Styling liegt im * Customizer (wp-custom-css, inline im , laedt daher NACH dieser Datei). * Deshalb werden die betroffenen Regeln hier mit !important zurueckgesetzt und * die bereits vorhandene Mobile-Darstellung wird auf das Band 768-1045px * ausgedehnt. Site-weit eingebunden in functions.php (dazzling_scripts). */ @media (max-width: 1045px) { /* --- Burger sichtbar, horizontales Menue eingeklappt --- */ .navbar-default .navbar-toggle { display: block !important; } .navbar-collapse.collapse { display: none !important; } .navbar-collapse.collapse.in { display: block !important; } .navbar-fixed-top .navbar-collapse { max-height: calc(100vh - 120px); overflow-y: auto; } /* --- Menuepunkte vertikal stapeln (wie im Mobile-Layout) --- */ .nav.navbar-nav, .navbar-default .navbar-nav { float: none !important; } .navbar-nav > li { float: none !important; } .navbar-default .navbar-nav > li > a { padding: 15px 10px 15px 0 !important; } .navbar-collapse { padding-left: 15px !important; padding-right: 15px !important; } .navbar-collapse .nav { padding-top: 30px !important; } /* --- Dropdowns inline als Akkordeon innerhalb des eingeklappten Menues --- */ .navbar-nav .open .dropdown-menu { position: static !important; float: none !important; width: auto !important; margin-top: 0 !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* --- Header zurueck auf das einspaltige Mobile-Layout --- */ .main-header-ylex { display: block !important; padding: 20px 0 !important; } .main-header-ylex .left { width: 100% !important; padding-right: 0 !important; } .main-header-ylex .right { width: 100% !important; } } /* --- Niedrigere Fixed-Navbar im neuen Band -> passender reservierter Platz. * Nur 768-1045px anfassen; <=767px bleibt beim bestehenden Mobile-Wert. Die * eingeklappte Navbar ist hier ~124px hoch (Logo 1.8rem), daher 128px. --- */ @media (min-width: 768px) and (max-width: 1045px) { body { padding-top: 128px !important; } #secondary, .ad-document-creation-sticky { top: calc(20px + 128px) !important; } body.logged-in.admin-bar { padding-top: calc(128px + 46px) !important; } } @media (min-width: 783px) and (max-width: 1045px) { body.logged-in.admin-bar { padding-top: calc(128px + 32px) !important; } }