Navigation wird nicht angenommen/dargestellt

Hallo,

ich baue gerade eine neue Homepage für meinen Fussballverein.

Mit Contao habe ich schon länger nicht mehr gearbeitet.

Ich hätte folgende Frage:
Auf dieser Website http://relaunch.fcwackerbiberach.de/ baue ich die Website gerade nach und nach auf.
Ich würde gerne eine superfish-Navigation an dem grauhinterlegten Bereich mit dem Punkt "Startseite" einfügen.
Die CSS-Files habe ich schon hochgeladen und das Modul auch schon erstellt.
Was muss ich machen, dass die CSS-Formatierungen aus der Superfish-CSS-Datei angenommen werden?

Ich hoffe ihr könnt mir weiterhelfen.

Viele Grüße

Peter

Hi,

hast Du die CSS Datei und das NAvi-Modul im Seitenlayout eingebunden?

Gruß
tschero

für eine kurze Anleitung gugst du hier :)

https://contao.org/en/extension-list...superfish.html

und bitte beachten! Das Modul funktioniert nicht mit der individuellen Navigation. Das festzustellen hat mich eine ganze Stunde gekostet...

Viele Grüße
vom Theo

Superfish ist out, weil es sich auf Hover konzentriert. Hol dir besser ne anständige Navigation die auch touch-fähig ist.

Z.B. den Fork von samikeijonen, welcher viljamis responsive-nav geforkt und verbessert hat.
https://github.com/viljamis/responsi....js/issues/178
https://github.com/samikeijonen/resp...tree/dropdowns

Falls das Markup des Navigationsmoduls nicht den Anforderungen entspricht, musst du das Template leicht anpassen.

Zitat:

Zitat von webmaster-fcw

Hallo, kannst du mir erklären, wie die diese responsive Navi in Contao installieren lässt, die du hier empfohlen hast?

Hier mal grob ohne Lade-Optimierungen:

Paket downloaden und entpacken.
Demos ansehen. Hier \responsive-nav.js-dropdowns\demos\multiple-levels\index.html
Datei auch mit Editor öffnen und ansehen.
styles.css auf den Server nach files/css/responsive-nav-custom.css kopieren.
responsive-nav.css und responsive-nav.js entsprechend auf den Server kopieren.
Noch eine responsive-nav-init.js auf dem Server erstellen.
Im Layout zusätzliche Head-Tags

HTML-Code:

<link href="files/css/responsive-nav.css" rel="stylesheet"> <link href="files/css/responsive-nav-custom.css" rel="stylesheet"> <script src="files/js/responsive-nav.js"></script>

Eigener Javascript-Code im Layout

HTML-Code:

<script src="files/js/responsive-nav-init.js"></script>

Initialisierung aus der index.html in die responsive-nav-init.js kopieren

PHP-Code:

// Init responsive nav var customToggle = document.getElementById( 'nav-toggle' ); var navigation = responsiveNav(".nav-collapse", { customToggle: "nav-toggle", // Selector: Specify the ID of a custom toggle enableFocus: true, enableDropdown: true, openDropdown: '<span class="screen-reader-text">Open sub menu</span>', closeDropdown: '<span class="screen-reader-text">Close sub menu</span>', init: function () { // Set ARIA for menu toggle button customToggle.setAttribute( 'aria-expanded', 'false' ); customToggle.setAttribute( 'aria-pressed', 'false' ); }, open: function () { customToggle.setAttribute( 'aria-expanded', 'true' ); customToggle.setAttribute( 'aria-pressed', 'true' ); customToggle.innerHTML = 'Close menu'; }, close: function () { customToggle.setAttribute( 'aria-expanded', 'false' ); customToggle.setAttribute( 'aria-pressed', 'false' ); customToggle.innerHTML = 'Open menu'; }, });

Mehr Optionen findet man in der responsive-nav.js. Achtung! Die responsive-nav.min.js funzt momentan nicht 100% (Ticket machen).
Ein Modul HTML erstellen

HTML-Code:

<a href="#" id="nav-toggle" class="nav-toggle">Menu</a>

Das ist der Menübutton für Responsive. Eigentlich wird der automatisch erstellt, aber das Init funzt nur mit dem aria-Kram, wenn wir einen eigenen machen.
Ein Template modifizieren - nav_responsive.html5

PHP-Code:

<?php $search = array('level_1', 'level_'); $replace = array('menu-items', 'sub-menu l_'); $this->level = str_replace($search, $replace, $this->level); ?> <ul class="<?= $this->level ?>" role="<?= ($this->level == 'menu-items') ? 'menubar' : 'menu' ?>"> <?php foreach ($this->items as $item): ?> <?php $search = array('sibling', 'submenu'); $replace = array('', 'dropdown'); $item['class'] = trim(str_replace($search, $replace, $item['class'])); ?> <li<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?>> <a href="<?= $item['href'] ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']): ?> class="<?= str_replace('dropdown', 'has-dropdown', $item['class']) ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?= $item['accesskey'] ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?= $item['tabindex'] ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?= $item['target'] ?> role="menuitem"><?= $item['link'] ?></a> <?= $item['subitems'] ?> </li> <?php endforeach; ?> </ul>

Ein Navimodul erstellen. Alle Seiten anzeigen. Mit Template nav_responsive.html5. CSS-Klasse = nav-collapse
Module im Layout einbinden
CSS:
Aus der responsive-nav-custom.css das CSS oberhalb des Blockes NAVIGATION STYLES entfernen. Das hier kann noch vom gelöschten Teil mit reingenommen werden.

HTML-Code:

:focus { outline: 1px dotted #fff; } .nav-collapse button { background-color: transparent; -webkit-appearance: button; cursor: pointer; }

Den @font-face Block entfernen (nicht im Einsatz).
Restliches CSS dann nach eigenen Wünschen anpassen.

Wenn's nicht funktioniert, habe ich irgendetwas vergessen.

Zitat:

Zitat von webmaster-fcw

Danke für Hilfe und Mühe.

Wo muss ich die Template-Datei abspeichern und mit welcher
Dateiendung?

Viele Grüße

Peter

Im BE neues Template anlegen. nav_egal.html5. Dann umbenennen.

Vielen Dank für die Antworten.

Ich habe es Schritt für Schritt so versucht, wie oben beschrieben wurde,

Jedoch werden bei mir keine CSS-Formatierungen und keine sonstigen Effekte angenommen.
Es sieht noch so aus: http://relaunch.fcwackerbiberach.de/start.html
Die Navi befindet sich unter dem Schriftzug "FC Wacker Biberach".

Was habe ich falsch gemacht oder vergessen?

Ich hoffe Ihr könnt mir weiterhelfen!

Schon mal vielen Dank!

Viele Grüße

Peter

Deine responsive-nav-custom.css scheint nicht vorhanden zu sein.

HTML-Code:

<link rel="stylesheet" href="files/css/responsive-nav-custom.css">

Edit: Den Toggler hast du auch nicht eingebunden. Hier die Fehlermeldungen aus der Firebug-Console.

Zitat:

"NetworkError: 400 Bad Request - http://fonts.googleapis.com/css?family=%27Open%20Sans%27"
css?fam...n Sans'
2
"NetworkError: 404 Not Found - http://relaunch.fcwackerbiberach.de/files/css/responsive-nav-custom.css"
respons...tom.css
"NetworkError: 404 Not Found - http://relaunch.fcwackerbiberach.de/assets/img/header.png"
header.png
Error: The custom nav toggle you are trying to select doesn't exist

throw new Error("The custom nav toggle you are trying to select doesn't exist")

responsive-nav.js (Zeile 570, Spalte 19)
carouFredSel: Set a width for the items!
2ff39f3eec49.js (Zeile 26)

Vielen Dank für die Antwort.

Ich habe jetzt beides miteingebunden.

Doch leider nimmt die Navigation immer noch kein CSS und JQuery an.

An was liegt den das?

Hier nochmal der Link zur Seite: http://relaunch.fcwackerbiberach.de/

Viele Grüße

Peter

Einfach mal genau das machen, was ich oben beschrieben habe. Du hast die responsive-nav-custom.css immer noch nicht eingebunden, dafür die responsive-nav.css zweimal. Außerdem nimmt dein Menü nicht das angepasste Template und hat auch nicht die Klasse nav-collapse.

Den Toggler würde ich erstmal über die Navigation setzen.

Und schmeiß bitte mal sämtliches Javascript raus, was du nicht im Einsatz hast. Warum brauchst du z.B. die Tabellensortierung mit jQuery und Mootools gleichzeitig und 3 Lightboxen (colorbox, mediabox und slimbox)?

Vielen Dank für deine Antwort.

Ich habe jetzt nochmal alles überprüft:
- Die CSS-Datei ist jetzt eingebunden
- Unnötiges Javascript ist jetzt draußen.

Doch leider wird in der Navigation immer noch nichts angenommen.

An was liegt das ?

viele Grüße

Peter

Liste der Anhänge anzeigen (Anzahl: 1)

Zitat:

Zitat von webmaster-fcw

Ich habe jetzt nochmal alles überprüft:

Wie?
Wenn du mit der Webconsole des Browsers kontrollierst, dann siehst du das hier:
Anhang 16661

Zitat:

Zitat von webmaster-fcw

Die CSS-Datei ist jetzt eingebunden

responsive-nav-custom.css hast du zwar in der Seite eingebunden (sonst würde nicht versucht es zu laden), aber es existiert nicht auf dem Server oder der Server hat keine Leserechte.

Wir können dir nicht helfen, wenn du die gegebenen Tipps nicht umsetzt ;-)

Gruß, folkfreund

Danke für die Antwort.

Tut mir Leid. Ich hatte vergessen diese CSS-Datei hochzuladen.
Ich war immer der Meinung das ich die Datei schon hochgeladen habe.

Jetzt wird die Navigation zwar angezeigt, jedoch noch ein bisschen unschön.
Wir bekomme ich es hin, dass die Navi nicht so ganz rechts ausgerichtet ist, sondern links in dem Bereich der Navigation angezeigt wird?
http://relaunch.fcwackerbiberach.de/start.html

Außerdem wie schaffe ich es, dass die CSS-Dateien für die Navi als internes Stylesheet eingebunden werden, sodass ich es in Contao bearbeiten kann?

Viele Grüße

Peter

Du könntest Dein CSS importieren.
Allerdings wird der interne CSS Editor nicht weiterentwickelt.
Auch die Official Demo supportet diesen in Absprache mit Leo nicht weiter.

Wen Du das CSS unbedingt aus Contao heraus bearbeiten willst, kannst Du das über die Dateiverwaltung machen.

Zu Deinem CSS:
Aktuell haben sowohl der individuelle Layoutbereich, wie auch die Navigation die id #navigation.
Das ist nicht gut zum formatieren.
Gib Deiner Navi doch mal eine eindeutige Klasse, wie zb hauptnavigation oder nav-main, dann kannst Du Sie auch direkt ansprechen.

Du hast Deine Navi über folgende Angabe nach rechts "verfrachtet":

Code:

.nav-collapse { float: right; }

Wenn Du das in float: left änderst oder löscht, wird die Navi wieder links sitzen.

Zitat:

Zitat von Samuell

Aktuell haben sowohl der individuelle Layoutbereich, wie auch die Navigation die id #navigation.
Das ist nicht gut zum formatieren.

Hauptsächlich ist das auch nicht valide. Eine ID ist schließlich eine eindeutige Identifikation.

Zitat:

Zitat von Samuell

Gib Deiner Navi doch mal eine eindeutige Klasse, wie zb hauptnavigation oder nav-main, dann kannst Du Sie auch direkt ansprechen.

Das brauch er nicht, hat ja schon die Klasse nav-collapse, aus irgendeinem Grund sogar zweimal.

Wenn er erstmal das macht, was oben steht, kann man weitersehen. Warum da nur ein Listenpunkt zu sehen ist, ist auch unklar.

Zitat:

Zitat von Andreas

Das brauch er nicht, hat ja schon die Klasse nav-collapse, aus irgendeinem Grund sogar zweimal.

Ich mag gern saubere und eindeutige CSS-Klassen. Darum der Rat.
nav-collapse ist da weniger aussagekräftig.
Aber generell hast Du natürlich recht, dass es nicht zwingend notwendig ist.

Zitat:

Zitat von Andreas

Wenn er erstmal das macht, was oben steht, kann man weitersehen. Warum da nur ein Listenpunkt zu sehen ist, ist auch unklar.

Das ist schnell erklärt:

Code:

#navigation {height: 60px;} .js .nav-collapse {overflow: hidden;}

Da sowohl Klasse als auch ID auf das gleiche Element verweisen, ist das sichtbare Verhalten logisch.

@webmaster-fcw:
Ich möchte Dir ans Herz legen Dich unbedingt nochmal mit CSS zu beschäftigen.

Vielen Dank für eure Antworten. Das hat mir sehr weitergeholfen. Ich weiß ich muss mich wieder intensiver mit CSS beschäftigen. Ich habe es schon länger nicht mehr angewendet.
Ich danke euch trotzdem, dass ihr mich unterstützt habt, und hoffe ihr werdet es auch weiterhin machen. So werde ich auch wieder etwas fitter in CSS!

Jetzt sieht auch die Navigation schon etwas aussagekräftiger aus: http://relaunch.fcwackerbiberach.de/

Jetzt bin ich nur noch am tüfteln, in welche der drei CSS-Datei ich schreibe, dass die Menüpunkte nebeneinander stehen sollen.
Außerdem mit welchem CSS-Befehl schaffe ich das?
Ich hab schon einiges ausprobiert, aber es klappt nicht so wirklich.

Könnt ihr mir da noch weiterhelfen?

Danke

Peter

Zitat:

Zitat von Samuell

nav-collapse ist da weniger aussagekräftig.

Die Klasse nav-collapse gehört mit zu der Anleitung dieser Nav, da diese Klasse auch bereits in den CSS enthalten ist. Somit funktioniert meine Anleitung out of the box. Was meinst du, was alles schief gelaufen wäre, wenn ich oben in der Anleitung noch geschrieben hätte "ändere den Selektor in allen CSS-Dateien"?

Normalerweise, wenn man alles so macht, wie ich geschrieben habe, hat man sofort eine gebrauchsfertige Nav, wo man nur noch das CSS etwas aufhübschen und optimieren muss.

Zitat:

Zitat von webmaster-fcw

Jetzt sieht auch die Navigation schon etwas aussagekräftiger aus: http://relaunch.fcwackerbiberach.de/

Ich habe keine Ahnung, wie du das hinbekommen hast, dass die Menüpunkte nicht nebeneinander stehen. Hast du dir wirklich die \responsive-nav.js-dropdowns\demos\multiple-levels\index.html aus dem Download-Paket mal angesehen?

Auch hier http://foxnet.fi/responsive-nav/demos/multiple-levels/

Nochmal danke für die Bereitstellung der Anleitung. Leider haben sich viele Fehler von meiner Seite aus eingeschlichen, sonst hätte das bestimmt gleich funktioniert.

Gruß

Peter

@Andreas:
Alles gut, ist keine Kritik an Dir :-)

Ich trenn das generell gern, nav-collapse würde ich für die Funktion nehmen und nav-main für das Layout.
So ist es modular.
Aber das sieht und handhabt jeder anders :-)

@webmaster:
Das hier

Code:

.nav-collapse li { width: 100%; }

in Kombination mit float: left sorgt für das Verhalten.

Auf der von Andreas geposteten Demo wird es so gelöst:

Code:

@media screen and (min-width: 40em) { .nav-collapse li { width: auto; } }

Ich hab mir das CSS der responsive nav nicht angeschaut, aber die Fälle wo die Navi "nicht responsive" sein muss, würd ich die Weite ggf. überschreiben.

Sofern Andreas sich schon mehr mit diesem Skript beschäftigt hat, kann er Dir ggf. genauer sagen was Du tun mußt.

Zitat:

Zitat von Samuell

Alles gut, ist keine Kritik an Dir :-)

Kein Problem, sorry, bin nur leicht angenervt, ich wusste nicht, dass man so viel falsch machen kann. Sorry webmaster-fcw, aber wenn du das nicht hinbekommst mit mehr Sorgfalt zu arbeiten, wirst du nicht nur mit dieser Navigation Probleme bekommen.

Zitat:

Zitat von Samuell

Ich trenn das generell gern, nav-collapse würde ich für die Funktion nehmen und nav-main für das Layout.
So ist es modular.
Aber das sieht und handhabt jeder anders :-)

Ja, wenn man es ans Laufen bekommt, kann man vieles machen, wenn man weiß was man tut. Aber falls noch jemand anderes diese Navigation mal ausporbieren möchte, vergebt einfach die Klasse nav-collapse und fertig.

Zitat:

Zitat von Samuell

Auf der von Andreas geposteten Demo wird es so gelöst:

Code:

@media screen and (min-width: 40em) { .nav-collapse li { width: auto; } }

Ja, das hat man in seinem CSS, wenn man es umsetzt wie oben geschrieben.

Zitat:

Zitat von Samuell

Sofern Andreas sich schon mehr mit diesem Skript beschäftigt hat, kann er Dir ggf. genauer sagen was Du tun mußt.

Ja, so umsetzen, wie oben beschrieben.

Ich weiß ich das ich hier viel falsch gemacht habe.
Trotzdem danke, dass ihr so geduldig mit mir sind.

Ich habe eure Anmerkungen umgesetzt, doch leider ist die Navigation immer noch nicht nebeneinander.

Was mache ich den immer noch falsch?

Viele Grüße

Peter

Du:

HTML-Code:

<script src="files/js/responsive-nav.js"></script> <link rel="stylesheet" href="files/css/responsive-nav-custom.css"> <link href="files/css/responsive-nav.css" rel="stylesheet">

Ich:

HTML-Code:

<link href="files/css/responsive-nav.css" rel="stylesheet"> <link href="files/css/responsive-nav-custom.css" rel="stylesheet"> <script src="files/js/responsive-nav.js"></script>

Danke.

Das hab ich so übernommen.
Doch leider hat das keine Veränderungen in der Navigation hervorgebracht.

Viele Grüße

Peter

Zitat:

Zitat von Andreas

4.
styles.css auf den Server nach files/css/responsive-nav-custom.css kopieren.
...
14.
CSS:
Aus der responsive-nav-custom.css das CSS oberhalb des Blockes NAVIGATION STYLES entfernen. Das hier kann noch vom gelöschten Teil mit reingenommen werden.

HTML-Code:

:focus { outline: 1px dotted #fff; } .nav-collapse button { background-color: transparent; -webkit-appearance: button; cursor: pointer; }

Den @font-face Block entfernen (nicht im Einsatz).
Restliches CSS dann nach eigenen Wünschen anpassen.

Jetzt das hier aus der ursprünglichen Anleitung machen. "oberhalb des Blockes NAVIGATION STYLES entfernen"

Vielen Dank für deine Hilfe.

Ich habe es jetzt so, wie beschrieben versucht.

Jedoch ist jetzt der Navipunkt "Startseite" so breit fast wie der ganze Navigationsbereich.

Ich versuche, den Punkt per CSS kleiner zu machen und das die weiteren Menüpunkte daneben erscheinen, jedoch klappt das mit keiner Klasse / ID.

Könnt ihr mir da weiterhelfen?

Viele Grüße

Peter

Nachdem du die style.css nach responsive-nav-custom.css umbenannt und die genannten Teile daraus entfern hast, sieht sie nicht so aus

PHP-Code:

:focus { outline: 1px dotted #fff; } .nav-collapse button { background-color: transparent; -webkit-appearance: button; cursor: pointer; }

sondern so. (Habe ich das denn wirklich so unklar geschrieben? Siehe Punkt 1 bis 4)

PHP-Code:

/* ------------------------------------------ NAVIGATION STYLES (+ responsive-nav.css file is loaded in the <head>) --------------------------------------------- */ :focus { outline: 1px dotted #fff; } button { background-color: transparent; -webkit-appearance: button; cursor: pointer; } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .nav-collapse, .nav-collapse * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .nav-collapse { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .nav-collapse, .nav-collapse ul { list-style: none; width: 100%; float: left; } @media screen and (min-width: 40em) { .nav-collapse { width: auto; float: right; } } .nav-collapse > ul { border-top: 1px solid rgba(255,255,255, .15); } .nav-collapse li { float: left; width: 100%; } @media screen and (min-width: 40em) { .nav-collapse li { width: auto; } } .nav-collapse a { background: #212428; border-bottom: 1px solid rgba(255,255,255, .15); color: #fff; float: left; padding: 0.9em 1.1em; text-decoration: none; width: 100%; } @media screen and (min-width: 40em) { .nav-collapse a { border-bottom: 0; border-right: 1px solid white; padding: 1em 1.5em; margin: 0; float: left; text-align: center; } .nav-collapse li:first-child a { border-left: 1px solid white; } } /* ------------------------------------------ NAV TOGGLE STYLES --------------------------------------------- */ .nav-toggle { border: 1px solid #fff; color: #fff; font-size: 0.85em; font-weight: bold; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; position: relative; overflow: hidden; float: right; line-height: 39px; padding: 0 0.75em; margin-top: 7px; margin-right: 5%; } .nav-toggle:hover, .nav-toggle:focus, .nav-toggle:active { background-color: #fff; color: #212428; } /* ------------------------------------------ MULTIPLE LEVELS --------------------------------------------- */ .nav-collapse a:hover, .nav-collapse li.focus > a { background-color: #3e4853; } @media screen and (max-width: 39.999em) { /* Enable active class to let the navigation expand over the calculated max height. */ .js .nav-collapse.multiple-level-nav.opened.dropdown-active { max-height: 9999px !important; } .js .nav-collapse.multiple-level-nav .sub-menu { clip: rect(0 0 0 0); max-height: 0; position: absolute; display: none; /* This way you don't have focus on sub menu items unless you open the sub menu. */ overflow: hidden; zoom: 1; } .js .nav-collapse.multiple-level-nav .sub-menu.toggled { display: block; max-height: 9999px; position: relative; } .js .nav-collapse li { position: relative; } .js .nav-collapse .dropdown-toggle { border: 1px solid #fff; color: #fff; content: ""; height: 46px; width: 46px; padding: 0; position: absolute; margin: 0; text-transform: lowercase; top: 0.6em; right: 4%; } .js .nav-collapse .dropdown-toggle:hover, .js .nav-collapse .dropdown-toggle:focus, .js .nav-collapse .dropdown-toggle:active { background-color: #fff; color: #212428; } .js .nav-collapse .dropdown-toggle:after { content: "+"; font-size: 20px; } .js .nav-collapse .dropdown-toggle.toggled:after { content: "-"; } } .dropdown ul a { background: #282e34; padding-left: 1.5em; } .dropdown ul ul a { background: #2d353e ; padding-left: 2.5em; } @media screen and (min-width: 40em) { .dropdown-toggle { display: none; } } .dropdown ul ul { border: 0; padding: 0; } .dropdown .dropdown.opened .has-dropdown { background: #9c2c12; } @media screen and (min-width: 40em) { .nav-collapse { padding-right: 4%; position: relative; } .js .nav-collapse, .js .nav-collapse .dropdown ul { max-height: none; overflow: visible; } .has-dropdown:after { font-size: 1.5em; line-height: 0.8; float: right; content: ""; width: 0; height: 0; margin: 1em 0 0 0.5em; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; } .dropdown ul .has-dropdown:after { content: ""; width: 0; height: 0; margin: 0.3em 0 0 0.5em; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-left: 6px solid #fff; } .nav-collapse .dropdown { position: relative; } .nav-collapse .dropdown li { width: 100%; } .nav-collapse .dropdown ul a { text-align: left; border: 0; } .nav-collapse li { border: 0; display: inline-block; height: 55px; line-height: 55px; position: relative; } .nav-collapse a { display: inline-block; padding: 0 16px; } .nav-collapse ul ul { float: left; margin: 0; position: absolute; top: 85px; left: -999em; z-index: 99999; text-align: center; } .nav-collapse li li { border: 0; display: block; height: auto; line-height: 1.0909090909; } .nav-collapse ul ul ul { left: -999em; top: 20px; } .nav-collapse ul ul a { padding: 15px 12px; white-space: normal; width: 150px; } .nav-collapse ul li:hover > ul, .nav-collapse ul li.focus > ul { top: 55px; left: 50%; margin-left: -75px; } .nav-collapse ul ul li:hover > ul, .nav-collapse ul ul li.focus > ul { top: 0; left: 0%; margin-left: 150px; } }

VIELEN DANK!

Jetzt hat es endlich geklappt. --> http://relaunch.fcwackerbiberach.de/start.html

Allerdings hätte ich noch eine Frage: Muss ich in responisve-nav-customs.css oder in der responisve-nav-customs.css ändern, dass die Navigationspunkte links und nicht rechts angeordnet werden?

Viele Grüße

Peter

Ja, wie oben geschrieben.

Zitat:

Restliches CSS dann nach eigenen Wünschen anpassen.

Ja das hab ich auch gedacht.

Doch keine Anweisung im CSS nimmt Formatierungen an, wenn ich z. B. die Ausrichtung ändern will oder die Farben der Punkte ändern will.

Welche Anweisung benutze ich, wenn ich das ändern will?

Viele Grüße und Dankeschön!

Peter

Die Elemente (HTML und CSS) im FE mit Firebug ansehen (obwohl es auch andere gute Developertools gibt, finde ich den immer noch am besten). Dort kann man dann auch direkt temporär seine Versuche machen, ohne direkt sein CSS zu ändern und zu speichern.

Dann im Internet eine Seite finden, welche die Grundlagen von CSS und vor allem auch den CSS-Selektoren für dich einfach verständlich erklärt. Wenn unverständlich einfach ne andere Seite ausprobieren.

Beispiel: http://jendryschik.de/wsdev/einfuehrung/css/selektoren

Vielen Dank für die Antwort.

Jetzt hat es soweit geklappt.

Viele Grüße

Peter

Hallo,

ich reaktiviere diesen Thread nochmal, da ich auch gerade versuche diese Navigation einzubauen.
Soweit klappt es auch, allerdings stolpere ich über den Layout-Builder.
Wenn dieser aktiv ist, dann erscheint zwar das Menu, es lässt sich aber nix anklicken und die Dropdowns kommen auch nicht. Quasi eine inaktive Abbildung des Menus.
Wenn der Layout-Builder deaktiviert ist, dann funktioniert es, mit Balken oben und unten und "Navigation überspringen".

Leider handelt es sich um den Umbau an einer Live-Seite, daher kann ich grad keinen Link geben, denn ich schalte das nur via Layout ein und aus auf der harmlosesten Seite.
Vielleicht kann mich aber auch ohne Draufschauen jemand in die richtige Richtung schubsen.

Danke für Hinweise!

Es wird wahrscheinlich irgendein Element über der Navigation liegen, welches du aber nicht siehst. Versuche mit den Dev-Tools od. Firebug herauszufinden welches Element dies ist. Wenn du mit der Maus im Tool über die Elemente fährst, bekommst du auf der Seite eine farbige Hinterlegung angezeigt. Evtl. kann man das mit nem z-index beheben, kann man aber nur sagen, wenn man die Seite sieht.