zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontales Menü im Bootstrap-Grid vertikal machen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.02.2017, 15:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 12
Berndi befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.02.2017, 12:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.04.2012
Beiträge: 109
Woogie befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.02.2017, 13:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 12
Berndi befindet sich auf einem aufstrebenden Ast
Standard

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:


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

Geändert von Berndi (08.02.2017 um 13:18 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.02.2017, 13:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.02.2017, 13:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 12
Berndi befindet sich auf einem aufstrebenden Ast
Standard

Wir würde so etwas konkret aussehen?
Mit Zitat antworten
  #6 (permalink)  
Alt 08.02.2017, 13:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wie würde "was" konkret aussehen?
Mit Zitat antworten
  #7 (permalink)  
Alt 08.02.2017, 13:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 12
Berndi befindet sich auf einem aufstrebenden Ast
Standard

Das Media-Query.

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

Ich finde nix.
Mit Zitat antworten
  #8 (permalink)  
Alt 08.02.2017, 14:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Code:
@media (min-width: 768px){

}
So sehen media-queries aus. Ich habe aber die Befürchtung dass der Fehler bei dir wo anders liegt.
Mit Zitat antworten
  #9 (permalink)  
Alt 08.02.2017, 14:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 12
Berndi befindet sich auf einem aufstrebenden Ast
Standard

Lässt sich das irgendwie auch mit einer ID koppeln, dass dieses Query ausschließlich dafür gilt?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.02.2017, 14:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 12
Berndi befindet sich auf einem aufstrebenden Ast
Standard

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*
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
horizontales Menü in horizontales Pulldown-Menü ändern Stephan1958 CSS 5 11.01.2012 14:37
Vertikales submenue in horizontales mainmenue einbinden susigeha CSS 7 25.02.2011 09:20
horizontales Menü mit Subemenü ohne Listenelemente aber mit Grafiken metalmarder CSS 4 21.02.2009 21:38
In horizontales Menü dropdown einbinden Star_Scream CSS 1 14.10.2008 14:45
[gelöst] Horizontales Dropdownmenu mit Unterordnern sui CSS 5 27.10.2005 19:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:25 Uhr.