XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Horizontales Menü im Bootstrap-Grid vertikal machen (http://xhtmlforum.de/showthread.php?t=73139)

Berndi 06.02.2017 15:21

Horizontales Menü im Bootstrap-Grid vertikal machen
 
Hallo Experten,

ich brauche mal einen Denkanstoß zu folgender Problematik.

Ich habe auf meiner Seite ein horizontal angeordnetes Menü innerhalb eines Bootstrap-Grids.

Jetzt möchte ich realisieren, dass sich das horizontale Menü in ein ein vertikal angeordnetes Menü "verwandelt", sobalr ich mich im Bereich der kleinen Geräte (col-xs) befinde.

Wie muss ich das anstellen?

Gruß,
Berndi

Woogie 08.02.2017 12:30

Das erledigt doch Bootstrap automatisch für Dich.


Schieb mal die Seite zusammen, dann siehst was passiert.
Wenn Du das schon früher oder anders haben willst, musst das mit den media Querys anders anlegen.
Tryit Editor v3.3

Berndi 08.02.2017 13:15

Hallo und danke für die Antwort.

Mein Code siht folgendermaßen aus:
Code:

<nav id="tgs-2ndnav" class="wrap navbar navbar-default tgs-2ndnav">
    <div class="container-fluid">
        <div class="moduletable jmoddiv jmodinside" data-jmodediturl="https://tgschwalbach.de/joomla/index.php?option=com_config&amp;controller=config.display.modules&amp;id=454&amp;return=aHR0cHM6Ly90Z3NjaHdhbGJhY2guZGUvam9vbWxhL2luZGV4LnBocC9vdGhlci1wYWdlcy92b2xsZXliYWxs" data-target="_self" data-jmodtip="<strong>Modul bearbeiten</strong><br />Abteilungsmenü - Volleyball<br />Position: 2ndmenu" style=" ">
            <ul class="nav  nav-pills nav-stacked ">
                <li class="item-1348"><a href="/joomla/index.php/berichte-volleyball">Berichte aus der Volleyball-Abteilung</a></li>
                <li class="item-1355"><a href="/joomla/index.php/historie">Historie</a></li>
                <li class="item-1356"><a href="/joomla/index.php/volleyball-rekorde">Rekorde</a></li>
                <li class="item-1357"><a href="/joomla/index.php/outdoor-wochenenden">Outdoor-Wochenenden</a></li>
                <li class="item-1396"><a href="/joomla/index.php/other-pages/volleyball/beach-volleyball">Beachvolley</a></li>
                <li class="item-1349"><a href="/joomla/index.php/abteilungsleitung-volleyball">Abteilungsleitung</a></li>
            </ul>
        </div>
  </div>
 </nav>

... und das Ergebnis nach dem Zusammenschieben so:
http://tgschwalbach.de/pics/horizontalesMenue2.jpg

Ich tippe ja auf einen "verbogenen" CSS-Eintrag, weiß aber nicht wonach ich Ausschau halten soll.

cloned 08.02.2017 13:28

nav-stackable bedeutet, dass sie immer und nicht erst ab einer gewissen Größe untereinander sind.
Components · Bootstrap

Das was du suchst wird nicht von Haus aus angeboten, da musst du ab deiner gewünschten Größe ein mediaquery schreiben, welches dir die Pills "stacked", also auf float:none setzt.
Auch dürfte dein CSS etwas überschreiben, deine Navigation sieht nicht "stacked" aus. Fügt man deinen HTML code zB auf der bootstrap Seite ein (dort ist ja das bootstrap css vorhanden) dann wird sie korrekt untereinander dargestellt.

Berndi 08.02.2017 13:44

Wir würde so etwas konkret aussehen?

cloned 08.02.2017 13:46

Wie würde "was" konkret aussehen?

Berndi 08.02.2017 13:56

Das Media-Query.

Ich suche mir einen Wolf nach dem CSS-Fehler, warum das nav-stacked nicht stacked ist.

Ich finde nix.

cloned 08.02.2017 14:01

Code:

@media (min-width: 768px){

}

So sehen media-queries aus. Ich habe aber die Befürchtung dass der Fehler bei dir wo anders liegt.

Berndi 08.02.2017 14:11

Lässt sich das irgendwie auch mit einer ID koppeln, dass dieses Query ausschließlich dafür gilt?

Berndi 08.02.2017 14:24

Okay, habe der Fehler gefunden.

Habe in meiner Stylesheet diesen Eintrag gefunden:
Code:

#tgs-2ndnav li {display: inline;}
...nur wird das Menü jetzt nur noch "stacked" angezeigt. :(

Jetzt muss ich wohl herausfinden, die ich dem Joomla-Menümodul beibringe nicht die "nav-stacked" Klasse zu übergeben ... *grübel*


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:37 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023