2017-01-18 3 views
2

Mein Kunde (Website - http://www.abclandscaping.com/) wollte, dass ich seine obere Navigationsleiste eine klebrige Bar sein, wenn die Webseite nach unten scrollt.Position fixiert mit 100% Breite des Eltern DIV

Verwendung von JS Ich habe die .sticky-Klasse zur Navigationsleiste hinzugefügt (div mit ID = "navbar"), wenn das Scrollen stattfindet. Die .sticky Klasse ist dies:

.sticky{ position: fixed; top: 0;} 

Aber jetzt, dass meine Navigationsleiste (div mit ID = „navbar“) seine Breite Position innerhalb des übergeordneten div ist nicht mehr und 100% wird der gesamte breite festgesetzt hat Browser Fenster. Ich verstehe, warum das passiert, aber ich kann nicht herausfinden, wie ich das Problem beheben kann.

Ich habe die anderen Threads zu dieser Frage gelesen, aber keine der dort besprochenen Fixes funktionierte für meinen Fall.

Hier ist meine Website, wo ich das Problem habe: http://www.abclandscaping.com/

+0

Sie haben ein zusätzliches Problem absolut positioniert werden, wenn klebrige angewendet wird „was unsere Kunden sagen“ wird unter dem Haupt Logo teilweise verdeckt. Sie könnten Links: 0; Außerdem müssen Sie dann auch den gesamten Inhalt des Headers anpassen, wenn er sich verschiebt. – Kyle

+0

@Kyle - Ja, das stimmt, aber das liegt daran, dass das Navbar Div jetzt so breit ist und sich sein Inhalt verschiebt. Wenn ich herausfinde, wie man seine Breite auf nicht mehr als die seines Elternteils beschränken kann, gibt es keine Überlappung und der Inhalt wird korrekt platziert. – hanazair

Antwort

0

ich nicht wirklich bin bekommen, was Sie wollen, aber:

Wenn Sie #navbar ‚s Breite #masthead relativ zu sein:

  • Make #masthead erhalten die Klasse sticky
  • #navbar und #logo zu
  • .sticky #rev_slider_1_1_wrapper, .sticky #subheader { visibility:hidden }
+0

Dies funktioniert nicht, da #masthead einige Elemente enthält, die aus der Ansicht gescrollt werden müssen. – hanazair

+0

Würde der zusätzliche Stil funktionieren? –

Verwandte Themen