Ergebnis 1 bis 4 von 4

Thema: Breite für sticky Navbar

  1. #1
    Contao-Nutzer Avatar von Spelmann
    Registriert seit
    24.11.2012.
    Ort
    Nördlich von Berlin
    Beiträge
    234

    Standard 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?
    Geändert von Spelmann (29.02.2016 um 16:12 Uhr)

  2. #2
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Der Trick besteht darin, dass mod_navbar_container Template zu verwenden. Dann wird im navbar selber ein container Element erstellt.

  3. #3
    Contao-Nutzer Avatar von Spelmann
    Registriert seit
    24.11.2012.
    Ort
    Nördlich von Berlin
    Beiträge
    234

    Standard

    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.

  4. #4
    Gesperrt
    Registriert seit
    28.02.2016.
    Ort
    Kirchheim b. München
    Beiträge
    66

    Standard

    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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •