Horizontales Menu wird Mobile nicht angezeigt

chantalkueng

Hallo
Ich habe ein horizontales Dropdown Menu auf meiner Webseite, das in der Desktopansicht gut funktioniert.
http://www.proverzasca.ch/index.php/de/
Möchte man die Seite aber auf dem Mobile anschauen, erscheint das Menu nicht.
In der Simulation am Desktop (Ctrl/Shift/m) erscheint das Menu erst ab einer Breite von ca 900px.
Ist etwas mit dem Code nicht in Ordnung?
Wäre froh um eure Hilfe.
Chantal

html { height:100.1%; }
body { font-size: 16px; font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #697075; }
a { outline:none; }
a:link { color: #000000; text-decoration: underline; }
a:visited { text-decoration: none; color: #000000; }
a:hover, a:active, a:focus { text-decoration: underline; color: #7aaba0; }
#container { width: 1000px; text-align: left;margin:20px auto; background-color: #fff; border: 2px solid #000000; }
#header { height:150px; background: url(../images/bg/oben.jpg); background-repeat: no-repeat; }
#navigation { width: 1000px; height:55px; background-color: #4c4c4c; }
#nav { float: left; width: 100%; font-size: 20px; }
#nav ul { margin: 0; padding: 0; }
#nav a { display: block; color: #fff; text-decoration: none;}
#nav ul li { position: relative; float: left; list-style: none; border-left: 1px solid #fff; }
#nav ul li ul{ display:none; }
#nav ul li:hover { background: #7aaba0; }
#nav ul li a { padding: 20px 50px 10px 10px; }
#nav ul ul { position: absolute; background: #4c4c4c; }
#nav ul ul li { float: none; width: 200px; border-bottom: 1px solid #fff; }
#nav ul ul li a { padding: 10px 20px; font-size:16px;}
#nav ul li:hover > ul { top: 100%; left: 0; display: block; z-index:1;}
#nav ul ul li:last-child { border-bottom: none; }
#main { min-height: 450px; height: auto !important; background: #fff; }
#left { padding: 10px 20px 30px; float:left;width:700px;border-right: 1px solid black;}
#right { width: 200px; float:left; background: #fff; padding:10px; }
#footer { padding: 10px; background: #424242; position: relative; clear: both; text-align: center; color: #a8a8a8;border:1px solid #39668A; }

Sailor

Mal abgesehen davon, dass die Seite nicht wirklich 'responsive' ist, sich also nur wenig bis gar nicht an kleinere Displaygrößen anpasst, hast du in einem der Stylesheets folgendes vorgegeben..

HTML

@media all and (max-width: 980px) {
  div#nav {
    display: none;
  }

Damit verschwindet das div#nav, wenn die Displaybreite kleiner als 980px wird.

chantalkueng

Wenn du mir noch sagen könntest in welchem css file das geschrieben ist, wäre das super. Ich kann es nämlich nicht finden. Danke

Sailor

Klar - kann ich natürlich!
http://www.proverzasca.ch/components/com…vm-ltr-site.css
Ab Zeile 1450.

chantalkueng

Na dort hatte ich nicht gesucht. Was soll ich jetzt schreiben in meiner template.css Datei? Ich habe es versucht mit

@media screen and (max-width: 980px) {
div#nav {
display: none;
}
@media screen and (max-width: 800px) {
div#line {
display: none;
}

aber das bringt nichts. Kannst du mir da auch weiterhelfen?
Danke
Chantal

Sailor

Die Frage ist, was möchtest du erreichen?
Die Seite komplett responsive und damit handytauglich zu machen, wird so wie ich es einschätze mit einfachen Mitteln nicht gehen.
Wenn du jetzt 'nur' das Menü sichtbar machen willst, wenn die Displaygröße/Breite kleiner als 980 Pixel, dann musst das 'none' durch 'block' ... ggf auch durch 'inline-block' ersetzen.
Also so...

HTML

@media all and (max-width: 980px) {
  div#nav {
    display: block;
  }
}

Wie du das allerdings in deine Seite einbauen kannst, kann ich nicht wirklich sagen, denn mit dem 'Joomla - CMS', das du offensichtlich nutzt, kenne ich mich nicht aus!

Sailor

Mir ist das im Zusammenhang mit deinem horizontalen Menü noch etwas aufgefallen.
Mit den derzeitigen Formaten wird der letzte Menüpunkt 'Kontakt' in die nächste Zeile verschoben und da diese Zeile einen weißen Hintergrund hat, ist dieser Menüpunkt beinahe unsichtbar.
Um den Zeilenumbruch an dieser Stelle (vor dem letzten Menüpunkt) zu verhindern, müsstest du in deiner 'template.css' Zeile 20 den Eintrag
#nav ul li a {
padding: 20px 50px 10px 10px;
}
ändern in
#nav ul li a {
padding: 20px 40px 10px 10px;
}
Dadurch werden die Menüpunkte jeweils um 10 Pixel schmaler und passen dann wieder alle in eine Zeile!

Tags