fehlerhafte Darstellung bei kleinerem viewport

    Hallo!


    Es geht nochmals um das template an dem ich gerade sitze: http://www.lyzarr.com/testsite/
    Sobald die Größe unter 768px Breite fällt ändert sich das Styling ungewollt.


    1.) Ich habe der Navigationsleiste (oben) eine Leder-Textur, einen hellbraunen Rand und einen Schlagschatten unten zugewiesen. Sobald die navi nun gemäß viewport collapsed und das Hamburger Menü angezeigt wird, verschwindet der Schlagschatten (alle anderen styles bleiben).
    Wie bekomme ich auch in dieser Ansicht den Schlagschatten angezeigt?


    2.) Dem footer habe ich ebenfalls diesen Hintergrund zugewiesen und er nimmt die volle Breite ein. Sobald der viewport aber unter 768px liegt, nimmt der footer nicht mehr die gesamte (Fenster/Browser) Breite ein (dies soll er aber weiterhin).


    Ich hoffe nochmals auf Eure Hilfe und bedanke mich bereits im Voraus für Eure Mühe!
    Gruß,
    Dan

  • Zum hilfreichsten Beitrag springen

    Zu 1.
    Das liegt an position: static der Navigationsbar die ab dem Viewport von 768px gilt.
    Versuche es mal mit position:absolut.


    Zu 2.
    In der Bootstrap CSS wird ab 786px für den body ein Padding links und rechts vergeben.
    Um das ganz auszumerzen musst Du an mehreren schrauben drehen. Einmal das Padding für body entfernen zu anderen das Padding dann aber für die Klasse .container wieder hinzufügen.

    Vielen Dank erneut, Indigo66!


    Das erste hat super funktioniert


    Code
    @media (max-width: 979px) { div.navbar.navbar-inverse.navbar-fixed-top {  position: absolute; }}


    Allerdings mußte ich noch folgendes hinzufügen, da das Logo und das hamburger Icon jeweils links und rechts abgeschnitten waren:


    Code
    @media (max-width: 767px) { div.navbar.navbar-inverse.navbar-fixed-top {  padding: 0 20px 0 20px; }}


    Bei dem Zweiten hatte ich keinen Erfolg, mit folgendem code:


    Code
    @media (max-width: 767px) {
.body {
  padding: 0 0 0 0;
 }
 .container {
  padding: 0 20px 0 20px;
 }
}


    Was habe ich falsch gemacht, bzw. gibt es nicht eventuell noch eine andere Variante, wie mit einem zuzätzlichen Container um den footer herum in der index.php, oder so etwas...?