Antworten auf deine Fragen:
Neues Thema erstellen

Responsive Navigation

AxelM

Nicht mehr ganz neu hier

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.
 

patrick_l

Hat es drauf

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
 

pixel_hunter

Aktives Mitglied

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 ä.?
 
H

Helpstar24

Guest

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.
 

AxelM

Nicht mehr ganz neu hier

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
 

Dagmar_Hannig

Wellifreund

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
 

AxelM

Nicht mehr ganz neu hier

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 ;)
 
H

Helpstar24

Guest

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:
@media all and (max-width: 680px) {

  /* Overall */
  .container {margin: 10px auto; width: 90%; overflow: hidden;}
  .header {position: relative; width: 90%; margin: 0 auto; padding: 40px 0 0 0;}
  .section {clear: both; margin: 20px 0;}
  .aside {clear: both; margin: 30px 0; background: #f8f8f8;}
  .footer {clear: both; overflow: hidden; margin: 0 auto; width: 100%; color: #777;}

  /* .header form */
  .header-form {display: none;}

  /* .header */
  .header h1,
  .header h5 {font-size: 24px; text-transform: uppercase; margin: 10px 0 0 0; text-align: center;}
  .header-title {color: #575656;}
  .header-desc {margin: 0; color: #777; text-align: center;}

  /* .nav */
  .mobile-nav {display: block; width: 100%; background: #fff;}
  .tinynav {display: none; width: 100%; margin: 0 auto; background: #fff;}
  .nav {position: relative; width: 96%; background: #575656; display: inline-block; padding: 2%; margin-top: 4px; clear: both; line-height: 1em; text-transform: uppercase;}

  .nav li {width:100%; height:45px; float:left; display:block; background-color:gray;color:white!important; border-bottom:1px solid silver}
  .nav li a{color:white; width:100%; height:45px; float:left; display:block; padding: 15px; }
  .nav li a:hover{color:silver;}

  /* .post-info-meta */
  ul.post-info-meta {color: #888; padding: 0;}
  ul.post-info-meta li {list-style: none; float: none;}
  ul.post-info-meta li.post-info-comment {}

  /* .footer */
  p.footer-copy {background: #575656; padding: 20px; clear: both; font-size: 0.9em; overflow: hidden; margin: 0 auto;}
  p.footer-copy .footer-credit {}

}


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




:)

LG,Helpi
 
Zuletzt bearbeitet von einem Moderator:
F

Florian Zarnack

Guest

Axel du kannst Dir zum Beispiel das Programm Irfan View auch runterladen und damit die Bildergröße ohne großen Qualitätsverlust kleiner machen :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.619
Beiträge
1.538.363
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben