Navbar collapse abstellen

    Könnt Ihr mir bitte helfen? Ich nutze ein CMS, das automatisch Code generiert ('Squarespace', ähnlich Wordpress). Leider ist das Layout sehr responsiv; ab einer horizontalen Auflösung von 640px verschwindet die Navigation Bar und ein Button erscheint, der bei einem Tippen oder Klick drauf ein Dropdown-Menü mit den Punkten der Navigation Bar öffnet. Nun will ich aber, das dies nicht geschieht. Hier das problematische Code-Snippet:


    <div id="navBlock" role="navigation">


    <nav class="main-nav" data-content-field="navigation">

    <ul>

    <li class="page-collection">

    <a href="/palindrom-1/">palindrom</a>

    </li>

    <li class="blog-collection active-link">

    <a href="/">Blog</a>

    </li>

    <li class="page-collection">

    <a href="/about/">About</a>

    </li>

    </ul>


    <select id="mobileSelect" name="mobileSelect">

    <option class="mobile-select-label" value="">Navigation</option>

    <option class="page-collection" value="/palindrom-1/">palindrom</option>

    <option class="blog-collection" value="/" selected="selected">Blog</option>

    <option class="page-collection" value="/about/">About</option>

    </select>


    </nav>

    </div>



    Wenn ich mir den Quelltext so ansehe... ich dachte erst Bootstrap aber es ist ganz normales HTML. Aber ich habe jetzt einen halben Tag nach einer Lösung gegoogelt aber finde nichts. Gibt es eine Möglichkeit mit CSS Code? Und wenn nicht, dann vielleicht mit JavaScript? Ich möchte einfach nur, dass die Leiste offen bleibt, auch wenn die horizontale Auflösung sehr klein ist. Am liebsten würde ich die 640px-Grenze ändern.


    Viele Grüße

    Robert

    Ohne zu wissen, was das CMS im Hintergrund macht, wird das schwierig.


    Du könntest aber mal versuchen, das komplette select-Menü rauszunehmen.


    Hast du denn überhaupt die Möglichkeit, den Code zu ändern oder eigenen Code einzusetzen?

    Zitat

    ab einer horizontalen Auflösung von 640px verschwindet die Navigation Bar und ein Button erscheint, der bei einem Tippen oder Klick drauf ein Dropdown-Menü mit den Punkten der Navigation Bar öffnet.

    Das ist ein gängiges und wohl begründetes Verhalten bei einem responsiven Layout und ich frage mich, warum Du es ändern willst?

    Na ja, diese select-Menüs sind jetzt nicht gerade das Beste.


    Aber du hast recht. Eigentlich sollte die Nav auf einem mobilen Gerät nicht mehr normal nebeneinander oder untereinander dargestellt werden, sondern per Klick auf einen Button zu öffnen sein.

    Warum ich das ändern will? Weil ich nicht viele Punkte in der Navbar habe und das hässliche, handyeigene PopUp-Dropdown-Menü das minimalistische Design der Website zerstört. Ich möchte es einfach weg haben.


    Was das CMS im Hintergrund macht, seht ihr in dem Code oben. Ich kann HTML, CSS oder JavaScript in das Design mit einschleusen. Hätten die eine Bootstrap-Navbar genommen, könnte ich mit ...


    CSS
    .navbar-collapse.collapse{
    display: block!important;
}

    ... dafür sorgen, dass die Navbar auf allen Geräten offen bleibt. Aber wie ist es bei einer HTML-Navbar? Im Code sind sehe ich die Selektoren 'nav', '#navBlock', '.main-nav' und '#mobileSelect'. Aber googeln hilft hier nicht mehr. Hat jemand Ideen?

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden