-
Breite für sticky Navbar
Ich verwende in einem bootstrap Layout eine bootstrap navbar auf Basis des Templates mod_navbar.
Über folgendes JS bleibt sie auch wie gewünscht beim Scrollen oben am Viewport stehen:
Code:
<script>
jQuery(document).ready(function($) {
// Fixa navbar ao ultrapassa-lo
var navbar = $('#navbarProdukte'),
distance = navbar.offset().top,
$window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
navbar.removeClass('navbar-fixed-top').addClass('navbar-fixed-top');
$("body").css("padding-top", "70px");
} else {
navbar.removeClass('navbar-fixed-top');
$("body").css("padding-top", "10px");
}
});
});
</script>
Die Klasse .navbar-fixed-top hat nun aber folgendes CSS:
HTML-Code:
position: fixed;
right: 0;
left: 0;
z-index: 1030;
was zur Folge hat, dass das Menü im Sticky-Zusand den Contao-Container verlässt und die gesamte Breite des Viewports einnimmt.
Gibts da ne elegante Lösung? Wenn ich jetzt hier erst zusätzliche divs mit diversen mediaQueries anlegen muss, brauche ich doch kein Framework wie Bootstrap, oder habe ich da was falsch verstanden?
-
Der Trick besteht darin, dass mod_navbar_container Template zu verwenden. Dann wird im navbar selber ein container Element erstellt.
-
Hi webstar.
Ja, hatte ich auch versucht, funktionierte aber nicht.
Ich habe dann komplett umgebaut, einen eigenen Inhaltsbereich erstellt und die Navi da eingesetzt. Jetzt geht's soweit ich das überschaue in den wesentlichen Browsern.
-
Oder du kannst auch einfach die folgendes machen:
.klasseNavigationFixed {
width: 900px; //Breite von dem Container
margin: 0 auto // Zentriert dann das ganze
}
So sollte es eigentlich auch klappen ;) Allerdings ist die Auswahl des richtigen Templates "mod_navbar_container" die bessere Lösung.