Fixiertes TOP-Menü

44 Kommentare


Hallo Ihr Lieben!
Ich bin grade immernoch ein bisschen sprachlos über die
vielen Nachrichten und das große Lob zu MIA & MIO *wow* !

 DANKESCHÖÖÖN


Es ist Zeit für ein neues Blog-Tutorial 

Viele von Euch haben mir geschrieben und wollten gerne wissen, wie man sein Menü so anlegt, dass es ganz oben im Blog angezeigt wird und beim Scrollen immer sichtbar bleibt - egal wo auf der Seite man sich gerade befindet. 

Das ist gar keine Zauberei und ich zeige Euch, wie es geht... 
Dieses Menü ist ein "fixiertes TOP-Menü", welches ganz einfach mit einem HTML-Gadget angelegt werden kann. Ich werde Euch den Code hier zur Verfügung stellen und erklären, wie Ihr ihn einfügt und auf Eure Bedürfnisse/Wünsche anpassen könnt. Lest Euch bitte alles einmal durch, bevor Ihr beginnt.
Die Aktualisierungen habe ich für euch orange gekennzeichnet.


Ganz wichtig: aktuelle Vorlage sichern...
Hier handelt es sich zwar nur um ein Gadget und Ihr müsst nichts am eigentlichen Layout-Code ändern, bitte macht aber trotzdem immer ein Backup Eures aktuellen Layouts, bevor Ihr beginnt. Immer!

So geht's:   Dashboard > Backup/Wiederherstellung (rechts oben) > Vollständige Vorlage herunterladen


 Und jetzt geht's los...

Öffnet in einem Fenster euer Dashboard und in einem neuen Fenster euren Blog, so wie er jedem angezeigt wird, sodass ihr euer bisheriges Menü seht, denn das brauchen wir gleich.
Dann geht im Dashboard auf Layout und dort auf Gadget hinzufügen und wählt  HTML/JavaScript hinzufügen aus. Kann auch in der Sidebar hinzugefügt werden, angezeigt wird euer Menü dann trotzdem ganz oben im Blog ;)


Im sich öffnenden HTML-Fenster lasst ihr das obere Feld frei, denn eine Überschrift wollen wir nicht.


Folgenden Code (bereits aktualisiert!) kopiert ihr hier und fügt ihn im unteren weißen Feld des Gadgets ein :



Speichern und im Blog nachsehen, ob das Menü da ist.
Das Ganze sieht im Blog dann etwa so aus:
Funktioniert aber noch nicht, weil ja noch keine Links eingefügt wurden.

 Eigene Links einfügen...

Öffnet das Gadget wieder und geht zu diesem Teil des Codes (am Ende). Das sind Eure zukünftigen Menüpunkte, die wir nun bearbeiten wollen:
  <a class="navi" title="Startseite" href="http://deineblogadresse/">Home</a>
  <a class="navi" title="Tooltip 1" href="Adresse-Seite1">Seite1</a>
  <a class="navi" title="Tooltip 2" href="Adresse-Seite1">Seite2</a>
  <a class="navi" title="Tooltip 3" href="Adresse-Seite1">Seite3</a>
  <a class="navi" title="Tooltip 4" href="Adresse-Seite1">Seite4</a>
  <a class="navi" title="Tooltip 5" href="Adresse-Seite1">Seite5</a>
  <a class="navi" title="Tooltip 6" href="Adresse-Seite1">Seite6</a>

Jede ganze Zeile ist ein einzelner Menüpunkt.

Zeile 1 ( Menüpunkt 1):
title="Startseite"
bedeutet, dass beim Drüberfahren mit der Maus über diesen Menüpunkt ein "Tooltip" angezeigt wird. In unserem Fall hab ich dem Menü gesagt, es soll beim Drüberfahren über HOME die Info "Startseite" anzeigen. Achtet immer darauf, dass die Gänsefüßchen stehenbleiben! Ihr könnt dort reinschreiben was ihr möchtet und was zum Menüpunkt passt.
---> Beispiel: zeigt mal mit eurer Maus in meinem Menü oben auf  "GALLERY", dann wird euch der Tooltip "LINKPARTY" angezeigt.

href="http://deineblogadresse/"
bedeutet, dass du hier deine komplette Blogadresse eingibst, damit der Klick auf diesen Menüpunkt (HOME) wieder zur Startseite deines Blogs führt. Denkt an die Gänsefüßchen ;)

>Home</a>
Name des Menüpunktes, so wie er im Menü später auch angezeigt werden soll. Nur die Schrift ersetzen (Home), nicht die Klammern oder das /a!



 Zweiter Menüpunkt-Beispiel mit angelegten Seiten

Als zweiten Menüpunkt legen wir nun (als Beispiel) "INFO" an. Im Menü wird also INFO angezeigt, beim Draufzeigen mit der Maus erscheint "Impressum & Kontakt" und mit Klick darauf gelangt man dann zu einer Seite, die Ihr vorher schon angelegt habt (Dashboard --> Seiten --> Neue Seite).

Nehmt euch für den 2. Menüpunkt die zweite Zeile des Code-Abschnitts vor:
  <a class="navi" title="Tooltip 1" href="Adresse-Seite1">Seite1</a>
Tooltip 1 ersetzt ihr mit (z.B.) "Impressum & Kontakt". Wenn ihr keine Tooltips haben möchtet, dann löscht einfach diesen Teil in den Zeilen, wo ihr keinen braucht: title="Tooltip 1".

Adresse-Seite1:
wechselt zum zweiten Browser-Fenster, in dem ihr euren Blog geöffnet habt. Kopiert den Link der Seite, auf die ihr mit dem neuen Menüpunkt verlinken möchtet. (Diese Seite muss natürlich bereits angelegt und veröffentlicht sein, sonst habt ihr keinen Link^^.) Ersetzt Adresse-Seite1 mit dem kopierten Link. Denkt an die Gänsefüßchen.
Der Link zu einer statischen Seite sieht so aus: http://misses-cherry.blogspot.de/p/kontakt.html

Seite1 ersetzt ihr nun mit dem Name eures neuen Menüpunktes, z.B. INFO



 Dritter Menüpunkt - Beispiel mit Kategorien

Man kann statt dem Link zu einer Seite auch den Link zu einer ganzen Kategorie verwenden. Klickt man diesen Menüpunkt dann an, werden einem automatisch alle Posts aus dieser einen Kategorie angezeigt. Probiert es mal oben in meinem eigenen Menü mit NÄHEN aus. Dort habe ich als Link die Kategorie genähtes statt einer einzelnen statischen Seite verwendet. Wenn ich nun einen Post verfasse und ihm das Label genähtes gebe, dann wird dieser Post, genau wie alle anderen mit diesem Label, nicht nur auf der Startseite, sondern automatisch auch immer mit Klick auf den Menüpunkt NÄHEN angezeigt. Natürlich sollten die Labels vorher schon existieren.

Nehmt euch hierfür die zweite Zeile des Code-Abschnitts vor:
  <a class="navi" title="Tooltip 2" href="Adresse-Seite2">Seite2</a>
Tooltip 2 ersetzt ihr mit (z.B.) "Hier zeige ich mein Genähtes". Wenn ihr keine Tooltips haben möchtet, dann löscht einfach diesen Teil in den Zeilen, wo ihr keinen braucht: title="Tooltip 2".

Adresse-Seite2: 
wechselt zum zweiten Browser-Fenster, in dem ihr euren Blog geöffnet habt. Macht einen Rechtsklick auf das Label, das ihr mit dem neuen Menüpunkt verlinken möchtet und kopiert seine Adresse. In meinem Fall heißt mein Label genähtes und der Link sieht so aus: http://misses-cherry.blogspot.de/search/label/genähtes
Ersetzt Adresse-Seite2 mit dem kopierten Link. Denkt an die Gänsefüßchen.

Seite2 ersetzt ihr nun mit dem Name eures neuen Menüpunktes, z.B. NÄHEN


Das war's schon, nun habt Ihr Eure eigenen Links im Menü.
Bearbeitet immer nur eine Zeile (also einen Menüpunkt), speichert dann und schaut im Blog, ob alles stimmt. Wenn ihr irgendwo einen kleinen Fehler habt und habt aber schon 6, 8 oder 10 Links bearbeitet, dann ärgert ihr euch hinterher, wenn ihr von vorne anfangen müsst.
Sollte etwas nicht geklappt haben, nachdem ihr den ersten Menüpunkt bearbeitet habt, dann 1. aktualisiert mal den Browser (F5). Wenn dann die Änderung immer noch nicht angezeigt wird, dann kontrolliert nochmal mit dem Originalcode hier im Tutorial, ob euch nicht doch vielleicht eine Klammer oder ein Gänsefüßchen o.Ä. flöten gegangen ist. Meist sind es nur solche Kleinigkeiten, die es nicht ganz funktionieren lassen ;)


 Das Styling  *UPDATE

Jetzt passen wir den Look des Menüs an Euren Blog an, dafür brauchen wir diesen Teil des Codes. *Ich habe hier nochmal einige kleine Änderungen vorgenommen, damit es einfacher zu handhaben ist.
<div style="text-align: center;
border-bottom: 1px solid #ccc;
border-top: 0px solid #ccc;
color: #ccc; link-color: #000;
background-color: #fff;
opacity: 1;
filter: alpha(opacity=100);
position: fixed;
z-index: 999; width:100% !important; top:0px;
left: 0px;
vertical-align:middle;
font-size: 16px;
letter-spacing: 1px;
line-height: 50px;
width: 100% !important;
font-family: 'Open Sans Light', Arial, Helvetica, Helvetica Neue, sans-serif;
word-spacing: 0px;
font-weight: normal;
text-transform: uppercase;


Erklärung:
Hier erkläre ich die Dinge, die ihr auch selber ändern/anpassen könnt. Alles andere, was hier nun nicht erwähnt wird, lasst ihr bitte so wie es ist, sonst kann es zu Schwierigkeiten mit dem Script kommen. Hier kommen nur die Basics, Schatten o.Ä. kommen in einem anderen Tutorial demnächst noch dran ;)



border-bottom: 1px solid #ccc; = border-bottom ist eine Linie am unteren Rand. 1px ist die Dicke dieser Linie. solid bedeutet, dass die Linie duchgezogen ist. Man kann solid auch mit dotted (gepunktet) oder dashed (gestrichelt) ersetzen. #ccc Ist der Farbcode der Linie. Den Farbcode eurer Wunschfarbe könnt ihr euch hier kopieren: www.colorpicker.com


border-top: 0px solid #ccc; Das selbe wie border-bottom, aber am oberen Rand.  0px bedeutet, dass dort keine Linie angezeigt wird. Möchtet ihr dort eine haben, dann ersetzt 0px mit 1px, 2px oder wie dick auch immer ihr sie gerne möchtet (einfach versuchen). solid bedeutet, dass die Linie duchgezogen ist. Man kann solid auch mit dotted (gepunktet) oder dashed (gestrichelt) ersetzen. #ccc Ist der Farbcode der Linie. Den Farbcode eurer Wunschfarbe könnt ihr euch hier kopieren: www.colorpicker.com

background-color: #fff; = Ist der Farbcode des Hintergrundes der Menüleiste. Wo Ihr euren Wunschfarbcode kopieren könnt, wisst ihr ja schon ;)

opacity: 1;  = Transparenz. Einfach zwischen 0.1 bis 1 probieren, wie arg transparent ihr euren Menü-Hintergrund möchtet. 1 bedeutet gar keine Transparenz, *je kleiner die Dezimalstelle, desto transparenter. Achtet darauf mit Punkt zu arbeiten und nicht mit Komma (0.5)

filter: alpha(opacity=100); = Nochmal Transparenz. Bei 0.7 z.B. muss hier 70 eingegeben werden etc.

font-size: 16px; = Schriftgröße der angezeigten Links

letter-spacing: 1px; = Abstand zwischen den einzelnen Buchstaben innerhalb eines Wortes.

font-family: Eure Schriftart

word-spacing: 0px; = Abstand zwischen einzelnen Wörtern, *auch innerhalb eines Links!

font-weight: normal; = Schriftgrad (normal, strong, italic, underline...)

text-transform: uppercase; = Wandelt allen Text in Großbuchstaben um. Für Groß- und Kleinbuchstaben einfach uppercase ersetzen mit: normal; oder none;



Die Farben *und Abstände Eurer Links könnt ihr mit diesem Abschnitt des Codes anpassen

<style type="text/css">
 a.navi:link {margin-top: 15px; color:#000;font-weight: normal; padding-right: 15px;padding-left:15px;}
 a.navi:visited {margin-top: 15px;color:#000;font-weight: normal; padding-right: 15px;padding-left:15px;}
 a.navi:hover {margin-top: 15px;color:#ccc; font-weight: normal; text-decoration: none;padding-right: 15px;padding-left:15px;}
 a.navi:active {margin-top: 15px;color:#ccc;font-weight: normal; padding-right: 15px;padding-left:15px;} 
</style>

Bitte ändert in diesem Teil aber nur die Farbe (color), Schriftgrad (font-weight) * und Link-Abstand (padding). Wie ihr das macht steht ja oben schon beschrieben, den Link-Abstand stellt ihr so ein:  padding-left: 15px; bedeutet, dass links von Eurem Link immer ein Abstand von 15px eingehalten wird. Bei padding-right genauso auf der rechten Seite des Links. Zusammen hat man dann einen Abstand von 30px zwischen zwei Links. Wenn ihr diesen Abstand vergrößern oder verkleinern möchtet, dann bitte immer beide Zahlen, sonst sitzen eure Links nicht mehr genau mittig im Menü. Für einen Abstand von 10px gebt ihr also bei padding-left: 5px und bei padding-right: 5px ein.
a.navi:link = Verhalten/Aussehen normaler Link
a.navi:visited = Verhalten/Aussehen bereits besuchter Links *(funktioniert nicht in jedem Blog).
a.navi:hover = Verhalten/Aussehen der Links beim Drüberfahren mit der Maus (Mouseover, hover)
a.navi:active = Verhalten/Aussehen momentan aktiver Links *(funktioniert nicht in jedem Blog).

Je nachdem welche Formatierungen euer Blog bereits hat, kann es sein, dass manche der hier genannten Optionen blockiert werden. Denkt immer an die Klammern, Gänsefüßchen etc. - löscht diese nicht, sonst funktioniert das ganze Script nicht mehr ;)



Wenn euch im Blog nun alles so angezeigt wird, wie ihr es haben wollt, dann könnt ihr das alte Menü nun löschen bzw die Seitenanzeige ausschalten. Im Layout geht ihr nun auf das Gadget "Navbar" und klickt auf "aus". Somit habt ihr eure Blogger-Navigationsbar (benutzt die überhaupt jemand??) ausgeschaltet, damit sie nicht hiner dem neuen Menü hervorblitzen kann (bei Transparenz...) ;)


Achtung! Sollte dieses Tutorial in deinem Blog nicht funktionieren, dann bitte nicht im Vorlagen-HTML rumspielen, wenn du nicht genau weißt, was du da machst.

1. aktualisiert erstmal den Browser (F5). Wenn dann die Änderung immer noch nicht angezeigt wird, dann kontrolliert nochmal mit dem Originalcode hier im Tutorial, ob euch nicht doch vielleicht eine Klammer oder ein Gänsefüßchen o.Ä. flöten gegangen ist.

Mit Sicherheit hat dein Blog schon Formatierungen, die dieses 'TOP-Menü-HTML' einfach blockieren. Zur Not kannst du hier nachfragen oder aber im Layout das Gadget einfach wieder löschen, wenn es wirklich nicht funktionieren will.

Dieses Menü beinhaltet KEINE Unterseiten und bindet NICHT die Social Media Icons ein.
Die Anleitung für die Social Media Icons findet ihr hier:



Blog Tutorial | Social Icons im Top-Menü



Viel Spaß mit dem neuen Menü ;)


44 Kommentare

  1. ah wie toll, ich hab die ganze zeit in fertigen designs was gesucht mit nem fixierten menü! aber selbermachen find ich viel besser, werde ich testen :-)

    AntwortenLöschen
  2. Liebe Daniela
    Natürlich musste ich das neue Menü gleich ausprobieren und bin begeistert! Danke für das tolle Tutorial!
    Schönste Grüsse
    Esther

    AntwortenLöschen
  3. Vielen Dank für die tolle Anleitung, es war ganz leicht (mit deiner Anleitung) und funktioniert alles super!
    wenn du Lust hast schau doch mal auf meinem Blog vorbei... http://vivtimcha.blogspot.ch/

    Liebe Grüsse
    Erika

    AntwortenLöschen
  4. Viiiielen Dank. Schon gespeichert und wird demnächst mit ein bißchen mehr Luft (und Verstand ;-)) umgesetzt. Liebe Grüße Danie

    AntwortenLöschen
  5. Danke für die tollen Tipps!
    Mit liebem Gruß
    Marie

    AntwortenLöschen
  6. Super vielen Dank werde ich demnächst mal ausprobieren, meine Web-Designerin hat gerade keine Lust Prinzesschen hat grad ganz viele Schmetterlinge im Bauch, da ist für Mamas Wünsche kein Platz, dafür bekomme ich von dir Hilfe, das finde ich super.
    GLG Bine

    AntwortenLöschen
  7. Meine Liebe Daniela,
    wie immer ein tolles Blogtutorial :)
    Langsam fügt sich alles zusammen :D
    Hach toll :)
    Liebe Grüße, Andrea

    AntwortenLöschen
  8. Die Dani <3 <3 unserer bezaubernder Zauberer :-)
    LG Birgit

    AntwortenLöschen
  9. Liebe Daniela, ich habe mich getraut und auch meinen Blog nach Deinem Turtorial bearbeitet. Vielen lieben Dank dafür is ja gar nicht so schwer wenn man weiß wie es geht. Vielen Dank für Deine Hilfe :-) LG Andrea

    AntwortenLöschen
  10. Vielen lieben Dank! Super Anleitung. Erledigt!

    AntwortenLöschen
  11. Liebe Daniela , vielen lieben Dank für das tolle Tut! Ich habe schon lange nach so einem gesucht. Eine Frage allerdings hätte ich noch, kann man die hover Effect auch in Glow umstellen? Ich habe es bereits versucht, aber irgendwie passt das nicht so ganz. Ich hoffe du kannst mir weiterhelfen.

    Liebste Grüße Sasi

    AntwortenLöschen
  12. Hi. vielen dank. hast mir echt geholfen :)

    Grüße Philip

    AntwortenLöschen
  13. Anonym30.5.15

    Ein mega Dankeschön auch von mir. Sowas hab ich gesucht!
    Ist auch schon umgesetzt. :)
    www.herzhaftsuess.de

    LG
    Nadja

    AntwortenLöschen
  14. Hallo,
    ich hab eine Frage, wie hast du das mit dem Drop Down Menü hinbekommen?

    LG^^

    AntwortenLöschen
    Antworten
    1. Mein aktuelles Menü ist Teil des Themes und kann mit diesem Tutorial so nicht nachgemacht werden, sorry.

      LG Daniela

      Löschen
  15. Danke für dieses mega tolle Tutorial! :) Ich möchte das bei Gelegenheit gerne einbauen, brauch dafür aber ein bisschen Ruhe, Zeit, Nerven und Kreativität ;)

    Eine Frage hätte ich noch, wie hast du die social media Buttons und die Suchfunkion da oben mit reinbekommen?

    Viele liebe Grüße
    Katharina

    AntwortenLöschen
  16. Hi Katharina,

    die Buttons sind Teil meines aktuellen Theme-Menüs und können nur mit weiteren HTML Codes eingefügt werden. Die Anleitung dazu kommt demnächst hier raus - bitte ein klein wenig Geduld ;)

    Liebe Grüße
    Daniela

    AntwortenLöschen
    Antworten
    1. Ui, da freu ich mich aber :) So lange bastele ich an meinem fixierten Menü herum ;)
      Ich bin gespannt und freue mich auf die Anleitung.

      Liebe Grüße

      Löschen
  17. Vielen Dank für das tolle Tutorial :)
    Es war super einfach das fixierte Menü zu erstellen. DANKE <3
    Gibt es schon das Menü für die Social Media Buttons? Die Idee finde ich großartig.
    Platzsparend :)
    Liebe Grüße
    Franzi

    AntwortenLöschen
  18. Die ANleitung zum einbinden der Social Media Icons ins Menü ist jetzt online ;)
    : http://www.misses-cherry.blogspot.de/2015/10/blog-tutorial-social-icons-im-top-menu.html

    AntwortenLöschen
  19. Könntest du auch mal erklären, wie du diese Unterkategorien in deinem Menü gemacht hast?
    Deine Tutorials sind echt klasse ❤︎
    Ganz liebe Grüße
    Lisa

    AntwortenLöschen
    Antworten
    1. Das ist bei diesem Code nicht möglich und folgt in einer der nächsten Blogger-Anleitungen.

      Liebe Grüße
      Daniela

      Löschen
  20. Die Anleitung ist super! Ewig habe ich nach so einer gesucht. Bloß kann ich die links auch irgendwie weiter auf der Linken seine anzeigen lassen ? Also das links weniger platz ist als rechts?

    Liebste Grüße Lisa von pretty unknown

    AntwortenLöschen
  21. Hallo und vielen Dank für dieses Tutorial. Leider wird jetzt der Cookie-Hinweis nicht mehr angezeigt ... was habe ich falsch gemacht ....?

    AntwortenLöschen
    Antworten
    1. Einen Tag später war der Hinweis wieder da :-)!

      Löschen
  22. Hallöchen,
    danke für das Tutorial, das hat mir wirklich sehr geholfen :)
    Ich wollte nur fragen, ob es auch eine Möglichkeit gibt, das Menü unter den Header zu verschieben, weil ich mein Menü lieber dort hätte. Wäre super, wenn du da was wüsstest :)

    Liebste Grüße,
    Kate ♥

    AntwortenLöschen
    Antworten
    1. Hi Kate,
      wenn du das Menü lieber unter dem Header haben möchtest, dann nimm lieber dieses hier [ http://misses-cherry.blogspot.de/2013/01/blog-tutorial-zentriertes-menu.html ] und schiebe das Gadget im Layout einfach unter den Header. Sollte unter dem Header keine Option für "Gadget hinzufügen" frei sein, dann melde dich nochmal, kann man easy lösen ;)

      LG Daniela

      Löschen
    2. Hallöchen,
      danke für die schnelle Antwort. Ich hab das jetzt mal so versucht, aber es sah fürchterlich aus, weil das auch noch so grau hinterlegt war. Ganz komisch. Das grau hinterlegte konnte ich jetzt ändern, aber komischerweise kann ich die Linien-Farbe nicht ändern. Hier mal der Link zu meinem Testblog: http://testblogkbuecherregal.blogspot.de/
      So sieht es momentan aus und ich finde das obere Menü eigentlich wunderschön und würde das am liebsten behalten, allerdings eben unter dem Header. Dafür hättest du gar keine Lösung?
      Weil das unter dem Header sieht momentan ja wirklich fürchterlich aus :D Wenn es da keine Möglichkeit gibt, dann lass ich es oben, aber es wäre wirklich schade :D

      Liebste Grüße und dickes Danke :)

      Löschen
    3. Das Problem wird sein, dass deine Vorlage den Platz unter dem Header für die Tabs reserviert hat und diese Formatierung dann automatisch auf den neuen Code anwendet.

      Versuch doch mal folgendes:
      Geh auf Vorlage > HTML bearbeiten. Klick oben auf "Weiter zum Widget" und wähle Header1, das bringt dich direkt zur richtigen Stelle im Code.

      Mache bei b:section id='header' folgende Änderungen:
      showaddelement='yes'
      locked='false'
      >> speichern.

      Dann geh ins Layout, dort müsste jetzt direkt im Header-Gadget ein zusätzlicher Platz für "Gadget hinzufügen" sein. Dort kopierst du den Menü-Code rein und löschst daraus folgende Stellen:
      position: fixed;
      z-index: 999;
      >> speichern.

      Gib bitte nochmal bescheid, ob es geklappt hat.

      GLG Daniela

      Löschen
    4. Hallöchen,
      das hat so jetzt geklappt, allerdings sind die Seiten und die Social Media Buttons jetzt leider nicht mehr in einer Zeile. Ich probiere noch ein bisschen rum, aber falls du weißt, woran es liegen könnte, wäre das super :D

      Auf jeden Fall vielen, vielen Dank, dass du mir so weiterhilfst :) ♥

      Löschen
    5. Ich denke, dass dein Layout einfach schon Formatierungen hat, die anderes blockieren.

      Löschen
  23. das hat wunderbar funktioniert.....wieder ein Schritt weiter....tolle Anleitung...vielen lieben Dank

    AntwortenLöschen
  24. Vielen Dank! Genau nach dieser Anleitung habe ich seit Tagen gesucht. Ich werde mich gleich am Wochenende dran setzen :-)

    AntwortenLöschen
  25. Hallo Daniela, dein Tutorial hat wirklich einwandfrei funktioniert. Ich hätte noch eine Bitte an dich. Weißt du vielleicht wie ich in den Menü ein Drop-Down-Menü einbinden kann.
    In ein "normales Menü" (eines, das nicht am oberen Bildrand fixiert ist) konnte ich es bereits einbinden, weiß jedoch nun nicht, wie das Ganze hier funktioniert.
    Wäre super, wenn du mir helfen könntest.
    Liebe Grüße :)

    Christina von ufer-los.blogspot.de

    AntwortenLöschen
    Antworten
    1. Hi Christina,

      hier gibt es bereits eine Anleitung für ein DropDown-Menü: DropDown-Menü

      Liebe Grüße
      Daniela

      Löschen
  26. Hallo liebe Daniela,
    ich bin absolute Blogger Anfängerin. Das mit dem Menü hat aber dank dir prima geklappt! Allerdings kommt nun schon mein erstes Problem *Schäm* ich habe mir auch einen "Home Button" eingerichtet. Das hat geklappt, aber nun will ich den zweiten Button (Seite 1) einrichten. Wie bekomme ich denn da eine neue Seite in meinen Blog, auf die dann verwiesen wird, wenn ich den Button klicke?
    Vielen Dank im Voraus

    AntwortenLöschen
    Antworten
    1. Hi Diana,
      um Seiten anzulegen gehst du ins Dashboard, dann auf 'Seiten' und dann klickst du auf 'Neue Seite'.

      LG Daniela

      Löschen
  27. Hallo Daniela,

    erst einmal danke für die Anleitung und den Code, danach suche ich schon seit gefühlt einer Ewigkeit. Auch wenne es eigentlich erst ein paar Tage sind. :D
    Ich wollte dich noch einmal fragen wie du zwischen den einzelnen Punkten die Striche hinbekommen hast? Das suche ich nämlich auch für mich. :o
    Und konnte ich der Anleitung nciht ganz entnehmen, sorry wenn es doch erwähnt wurde. :)

    Liebe Grüße
    Svenja

    AntwortenLöschen
    Antworten
    1. Hi Svenja,

      die Trennungen sind nicht Teil des oben beschriebenen Menüs.
      Du kannst es aber mal versuchen, indem du im Code unter border-bottom & border-top eine neue Zeile hiermit eingibst: border-right: 1px solid #ccc;

      LG Daniela

      Löschen
  28. Hallo liebe Daniela,
    ich verbringe die letzten Tage Stunden auf deinem Blog und passe mit Hilfe deiner tollen Tutorials meinen Blog an. Erst mal danke dass du dir die ganze Mühe machst.
    Ich habe nur eine Frage. Das Menü wird in der Mobilen Version nicht angezeigt. Da hab ich dann einfach gar keins. Kann ich das irgendwie ändern oder ist das mit dem Menü gar nicht möglich?
    Danke schon mal für deine Hilfe und einen schönen Sonntag.
    Liebe Grüße,
    Miri

    AntwortenLöschen
    Antworten
    1. Hallo Miri,
      mobil wird die Menüleiste nur angezeigt, wenn die mobile Ansicht im Dashboard deaktiviert ist. Demnächst kommt aber nochmal eine Erweiterung dazu raus.

      Liebe Grüße
      Daniela

      Löschen
  29. Super Tutorial und wunderschöne Icons, was soll man sagen, vielen Dank!! Davor hatte ich meine Icons in der Sidebar, aber so ist es tausendmal komfortabler. Noch eine Frage: bei mir "kleben" die Icons noch sehr am oberen Rand und sind nicht so zentriert wie der Rest des fixierten Top-Menüs. Weißt Du, was man hier ändern muss?

    Liebste Grüße
    Andrea

    AntwortenLöschen
  30. Hallo Daniela,

    vielen Dank für die tolle Erklärung! :) Du hast mir damit wirklich sehr weitergeholfen!
    Einen schönen Sonntag noch!

    Caro

    AntwortenLöschen
  31. Danke für die tolle Erklärung, die hat echt weitergeholfen! Genauso wie die anderen Tutorials über Bloggestaltung.

    Liebe Grüße
    Lara

    AntwortenLöschen

Danke für deine Nachricht!

Das könnte dich auch interessieren

Copyright

Der Inhalt dieser Seiten ist mein Eigentum und unterliegt dem deutschen Urheberrecht. Die Kopie, Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen vorab meiner schriftlichen Zustimmung.
© www.misses-cherry.de 2009-2017