Responsive Navigation

Hallo,
Ich habe das Wordpress Theme "Adelle" etwas modifiziert.
Wenn man sich jetzt die Navigation ansieht, erscheint da auf dem Handy ein Dropdown.
Ansich ist das gut. Blöd ist aber, dass immer der letzte Punkt des Dropdown angezeigt wird.
Hat jemand einen Vorschlag, wie ich die Aktuelle Seite darstellen lassen kann?
Hierfür brauchts ansich nur die Idee, wie ich das in HTML / CSS umsetze den Rest bekomme ich hin.
Danke schonmal für eure Antworten.

 

Bitte poste einen Link zu deiner Website, damit wir uns die Navigation anschauen können. So ohne Markup und CSS ist kaum nachvollziehbar.

Liebe Grüße, Patrick

 

Arrrgh verd.... sorry.
www.fraeulein-pusteblume.de

 

Als Antwort hier wohl nicht ganz passend, aber:
Ich konnte bzw wollte die Seite nicht auf Smartphone abrufen, WEIL die Ladezeit viel zu lang ist, mit 11,7 MB ist die Seite m.E. viel zu groß für mobil. Wieso sind viele der Bilder denn so riesig groß, wenn scho so viele auf eine Seite sollen (z.B.1,2 MB)?
Ist das Theme denn responsible oder ä.?

 

Habe die Webseite eben auch aufgerufen. Kann ich nur bestätigen. Die Bilder werden in einer besonders hohen Auflösung hoch geladen.

Das ist Gift für das Handy Daten Volumen.
Kleiner Tipp: Mit Gimp kann man die Bilder problemlos verkleinern und gleichzeitig besteht auch die Möglichkeit beim Speichern die Bilder zu komprimieren.

 

Generell gebe ich euch da recht. Vermutlich wäre da ein wenig Nachhilfe Wordpress / Photoshop auch angebracht.
Aber hat jemand eine Idee zu der Nav

 

Hallo Axel,

habe deine Homepage gerademal aufgemacht.
Vom Theme her gefällt sie mir nicht schlecht.

Aber: Bei der Navigation gibt es keine Dropdown Bereiche bei der Darstellung auf meinem Notebook. Sag mir mal, wo du einen Dropdown hast in deiner Darstellung.

Bei der Vorstellung deiner Bücher auf der ersten Seite würde ich nach dem ersten Satz von einem Buch eine Weiterleitung zum Lesen auf einer Beitragsseite machen.
Das gilt auch für die anderen Artikel auf deiner ersten Seite. Die Vorstellung deiner Person sollte eine eigene Seite bekommen.

So lang wie die Seite ist, hat doch keiner Lust nach unten zu scrollen. Bilder klein machen, ein Satz zum Weiterlesen und schon hast du die erste Seite massiv reduziert, bzw. brauchst nicht so viele Seiten. Mehr als Seiten guckt sich selten einer an.

Grüße
Dagmar

 

Mehr als 3 Seiten guckt sich keiner an.

 

Hallo, Danke für eure Antworten.
Wenn ihr die Seite auf dem Handy anseht, werdet ihr sehen, dass die Nav zum Dropdown wird.
Und um dieses Dropdown gehts

 

AxelM hat Recht. Ich schreibe Dir heute noch den Code. Dann musst du diesen
in die CSS Datei mit einpflegen.

-> Design -> Editor -> Stylesheet

Besser wär's wenn du diesen Code ersetzt.

Edit:

Öffne wie schon erwähnt die Stylesheet Datei:
Ab Zeile 74

diesen Code bis Zeile 110 ersetzen, einfach Copy und Paste:

HTML:

1.  
2. @media all and (max-width: 680px) {
3.  
4.   /* Overall */
5.   .container {margin: 10px auto; width: 90%; overflow: hidden;}
6.   .header {position: relative; width: 90%; margin: 0 auto; padding: 40px 0 0 0;}
7.   .section {clear: both; margin: 20px 0;}
8.   .aside {clear: both; margin: 30px 0; background: #f8f8f8;}
9.   .footer {clear: both; overflow: hidden; margin: 0 auto; width: 100%; color: #777;}
10.  
11.   /* .header form */
12.   .header-form {display: none;}
13.  
14.   /* .header */
15.   .header h1,
16.   .header h5 {font-size: 24px; text-transform: uppercase; margin: 10px 0 0 0; text-align: center;}
17.   .header-title {color: #575656;}
18.   .header-desc {margin: 0; color: #777; text-align: center;}
19.  
20.   /* .nav */
21.   .mobile-nav {display: block; width: 100%; background: #fff;}
22.   .tinynav {display: none; width: 100%; margin: 0 auto; background: #fff;}
23.   .nav {position: relative; width: 96%; background: #575656; display: inline-block; padding: 2%; margin-top: 4px; clear: both; line-height: 1em; text-transform: uppercase;}
24.  
25.   .nav li {width:100%; height:45px; float:left; display:block; background-color:gray;color:white!important; border-bottom:1px solid silver}
26.   .nav li a{color:white; width:100%; height:45px; float:left; display:block; padding: 15px; }
27.   .nav li a:hover{color:silver;}
28.  
29.   /* .post-info-meta */
30.   ul.post-info-meta {color: #888; padding: 0;}
31.   ul.post-info-meta li {list-style: none; float: none;}
32.   ul.post-info-meta li.post-info-comment {}
33.  
34.   /* .footer */
35.   p.footer-copy {background: #575656; padding: 20px; clear: both; font-size: 0.9em; overflow: hidden; margin: 0 auto;}
36.   p.footer-copy .footer-credit {}
37.  
38. }
39.  

Das schaut dann so aus. Einfach auf das Bild klicken.






LG,Helpi

 

Vielen Dank das stellt meine Frau zufrieden

 

Ich weiss. Ich hab's die Seite eben aufgerufen und es funktioniert einwandfrei

LG, Helpi

 

Axel du kannst Dir zum Beispiel das Programm Irfan View auch runterladen und damit die Bildergröße ohne großen Qualitätsverlust kleiner machen