Fixed header mit fixiertem Menue beim Scrollen wie geht das?

  • Hallo ich bin noch ganz neu mit dem Zetaproducer zu Gange. Ich nutze die Vorlage Travel Responsive (Layout: Travel Responsive by StS) und möchte gern damit über CSS, das Menü im Header und das Menue darunter fixieren, so dass es zusammen mit dem Logo stehen bleibt, wenn man scrollt. Ich habe mal einen Screenshot der Menus angehängt.

    Wie bekomme ich das hin? Welche Schritte sind zu tun? Über Tipps und Hilfen bin ich sehr dankbar!:thumbup:

  • Das ist nicht ganz trivial und wir können Ihnen im Rahmen dieses Forums keinen fertigen CSS-Code dafür liefern. Es kann aber sein, dass ein anderer Nutzer dazu bereit ist.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hallo Stefan S.,

    ich hätte einen CSS Script nur weiss ich nicht welche Bezeichnungen im Travel Responsive verwendet werden, wenn ich das wüsste könnte ich den Script selbst anpassen und einfügen: Der vorhandene Script lautet:

    <style>

    body {margin:0;}

    .navbar {

    overflow: hidden;

    background-color: #333;

    position: fixed;

    top: 0;

    width: 100%;

    }

    .navbar a {

    float: left;

    display: block;

    color: #f2f2f2;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

    font-size: 17px;

    }

    .navbar a:hover {

    background: #ddd;

    color: black;

    }

    .main {

    padding: 16px;

    margin-top: 30px;

    height: 1500px; /* Used in this example to enable scrolling */

    }

    </style>

    </head>

    <body>

    <div class="navbar">

    <a href="#home">Home</a>

    <a href="#news">News</a>

    <a href="#contact">Contact</a>

    </div>

    <div class="main">

    <h1>Fixed Top Menu</h1>

    <h2>Scroll this page to see the effect</h2>

    <h2>The navigation bar will stay at the top of the page while scrolling</h2>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    <p>Some text some text some text some text..</p>

    </div>

    </body>

  • Das ist wie gesagt nicht ganz so trivial.

    Ich schlage vor, Sie wechseln ggf. auf ein Layout, das fixierte Navigationsmenüs schon ab Werk bietet wie z.B.:

    • Contemporary Responsive
    • Flat Responsive
    • Modern Responsive
    • Poster Responsive
    • Stripe Responsive
    • Top Responsive

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

Jetzt mitmachen!

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