Menü Position Ändern

    Hallo,

    ich habe ein ziemlich komisch Problem. Ich möchte die Position des Menüs verändern. Normalerweise gehe ich folgendermaßen vor:

    Ich nutze Firebug um die korrekte CSS Zeile zu finden und bearbeite diese dann. Das komische ist, ich finde die korrekte Zeile einfach nicht in der style.css! Das Menü wird unter Firebug als 'element.style' angeben, wenn ich dieses in Firebug editiere, versetzt sich auch das Menü, so wie ich es gerne hätte. Nur stehe ich bei der style.css vor einem Rätsel. Welche Zeile ist für das Menü (normalerweise) verantwortlich?

    Grüße

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Zitat von Savro

    Welche Zeile ist für das Menü (normalerweise) verantwortlich?

    Das hängt vom Theme ab und lässt sich so pauschal nicht beantworten. Das solltest du aber im Firebug sehen können, auch wenn keine Regeln dafür definiert sind.

    "Element.style" bedeutet, dass es Inline-Styles im Element selbst sind. Das kannst du so nicht einfach in die style.css übernehmen.

    Es sieht in Firebug wie folgt aus (makierter Wert ist der, der die Position vom Menü verändert):

    Leider sind meine Kenntnisse nicht unbedingt ausgereift, daher stehe ich etwas aufm Schlauch.

    :)

    Der "spannende" Teil steht in dem Fall links. Dort kannst du sehen, dass das Menü die ID "site-navigation" und die Klassen "main-navigation" und "stuckMenu" hat.

    Darüber kannst du das Element "ansprechen".

    Da der Wert "top" auch inline vergeben ist, musst du !important verwenden, um den Inline-Wert zu überschreiben.

    Folgendes sollte also funktionieren:

    CSS
    #site-navigation
{
top:80px !important;
}

    Alternativ kannst du auch die Klasse verwenden:

    CSS
    .main-navigation
{
top:80px !important;
}

    Am Rande: Der Wert erscheint im DOM-Inspector als "inline". Er muss aber nicht zwangsläufig auch im HTML-Code inline sein, sondern kann durchaus auch durch irgendein Script, das die Menüposition oder Darstellung bei Responsive o.ä. beeinflusst, gesetzt worden sein. Das sollte man ggf. berücksichtigen/klären.

    Klasse Antworten, danke!

    Leider wird dabei das Menü nicht mehr fixiert. dh wenn ich scrolle, verschwindet bei einer veränderten Position das Menü, das "gefixt" angezeigt wird. Ich vermute nun einfach, dass die Lösung des Problems das Verschieben des gesamten 'container's wäre, in dem auch die main.navigation sitzt.

    Jedoch stehe ich nun wieder vor dem selben Problem. Ich habe danielgoehr's Methoden dabei auf den 'container' bezogen - funktioniert aber nicht. Hier finde ich die Zeile ebenfalls nicht.

    Sorry dass ich hier groß rumfragen muss, normalerweise finde ich mich in die Probleme selbst, aber ich bin hierbei am verzweifeln :D

    lg

    Zitat von Savro


    Leider wird dabei das Menü nicht mehr fixiert. dh wenn ich scrolle, verschwindet bei einer veränderten Position das Menü, das "gefixt" angezeigt wird.

    Dann gilt vermutlich das, was b3317133 schon angemerkt hat. Der top-Wert wird dann vermutlich per Javascript dynamisch gesetzt.

    Du könntest versuchen, entweder das umliegende Element anzupassen (wie du ja auch schon vergeschlagen hast) oder ggf. mit Padding zu arbeiten.

    "container" sollte/könnte dabei schon die passende Klasse sein. Ohne Link zur Seite ist das aber schwer zu sagen, was du wie genau anpassen musst.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden