#1 Icons als Links in der Navigation von Bayernberni 11.06.2017 12:49

avatar

Hallöchen,

ich würde gerne in meiner Webseite bayernberni.de (Design: Tokio) in der Hauptnavigationszeile oben zwei Buttons "What's New" und "Werbekarte der Woche" auch als 'Post-It' statt Text darstellen. Geht so etwas? Da ich bislang von html Null Plan habe, hab ich schon nach einem Widget gegoogelt und wie ich das in die Navigation einbaue. Bei beidem hab ich die Segel gestrichen. Kann mir vielleicht jemand weiterhelfen?

Vielen Dank und viele Grüße
Berni

#2 RE: Icons als Links in der Navigation von az_ 15.06.2017 07:09

avatar

...coole Idee! google mal nach "background-image + CSS"

LG, az

#3 RE: Icons als Links in der Navigation von Bayernberni 21.06.2017 20:25

avatar

Hallöchen,

hab ich. Aber selbst wenn ich das widget finden, bearbeiten, begreifen könnte, wo muss ich den Code hinkopieren?
Auf der Menüseite von jimdo gibts ja nur dieses eine Feld für den Header.

Sorry, hab von html noch Null Plan.

#4 RE: Icons als Links in der Navigation von Charles 22.06.2017 12:42

avatar

Zitat von Bayernberni im Beitrag #3
Hallöchen,


Auf der Menüseite von jimdo gibts ja nur dieses eine Feld für den Header.




Der reicht auch vollkommen aus.

#5 RE: Icons als Links in der Navigation von Charles 23.06.2017 09:49

avatar

Meinst du so?

#6 RE: Icons als Links in der Navigation von bispo 11.07.2017 22:10

Hallo zusammen,

ich interessiere mich auch für diese Einstellung und würde mich super freuen, wenn der Beitrag dazu fortgesetzt wird.

Danke und schönen Abend

#7 RE: Icons als Links in der Navigation von az_ 12.07.2017 13:57

avatar

...wenn Du ein Hintergrundbild unter einen Link zu schieben möchtest, kannst du das mithilfe der CSS-Anweisung content:''; machen.
Damit kannnst Du das HG-Bild frei positionieren:

1
2
3
4
5
6
7
8
9
10
11
12
 
      li#cc-nav-view-2352588724  {
width: 80px;
height:80px;
position:absolute;
top:-10px;
content:'';
background-image: url(https://image.jimcdn.com/app/cms/image/transf/none/path/s68c2e6eecabba176/image/iacda3c533519dc80/version/1499859585/image.png);
background-position: center ;
background-size:100%;
background-repeat: no-repeat;
z-index:9999;
}
 





Beispiel: https://designtest-barcelona.jimdo.com/


LG, az

#8 RE: Icons als Links in der Navigation von az_ 12.07.2017 20:02

avatar

PS: zusätzlich habe ich im Beispiel noch den Text "ausgeblendet" und alles auf die Desktop-Ansicht beschränkt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
@media (min-width:1170px) {
li#cc-nav-view-2352588724 {
width: 80px;
height:80px;
position:absolute;
top:-10px;
content:'';
background-image: url(https://image.jimcdn.com/app/cms/image/transf/none/path/s68c2e6eecabba176/image/iacda3c533519dc80/version/1499859585/image.png);
background-position: center ;
background-size:100%;
background-repeat: no-repeat;
z-index:99999;
}
 

li#cc-nav-view-2352588724 a {
text-indent: -9999px;
height: 80px;
}
}
 



LG, az

#9 RE: Icons als Links in der Navigation von bispo 12.07.2017 23:25

Vielen Dank für die schnelle Antwort.

Ich bin kein Programmierer, deshalb meine Frage: gebe ich den Code unter Eigenes Layout > CSS ein oder bin ich hier falsch?

Ich kann im Code keine Bildverknüpfung erkennen, wo kann ich ein anderes Bild (anstelle des gelben Post-it) hinterlegen?

Danke vielmals.

#10 RE: Icons als Links in der Navigation von bispo 14.07.2017 01:43

Ich habe die Bildverknüpfung inzwischen entdeckt (sorry war eigentlich nicht zu übersehen). Unter CSS eintragen funktioniert leider nicht, vielleicht kannst Du mir nochmal genau sagen wie ich den Code eingeben muss. Danke.

#11 RE: Icons als Links in der Navigation von az_ 23.07.2017 10:14

avatar

schau mal hier: https://www.redesign-berlin.de/jimdo-tut...ngen/jimdo-css/

#12 RE: Icons als Links in der Navigation von Kathrin Klimek 28.09.2017 12:20

Ich würde gerne für das Design "Helsinki" auch so ein Icon haben. Meine Homepage lautet: ministrieren-in-oberhausen.com.
Anstelle des Reiters "NEWS" soll dann ein Bild anstelle des Textes angezeigt werden. Dazu soll es dann zur dazugehörigen Seite verlinkt werden.
Ich hoffe, es kann mir jemand weiterhelfen!
Gruß

#13 RE: Icons als Links in der Navigation von moritz 17.11.2017 14:22

Hallo zusammen,

meine Frage schließt sich an die von Berni an. Ich finde die Idee mit den Icons schön. Und würde konkret gern welche für "shop" und "spenden" in der Navigation verwenden.

Soweit so klar und super gut hier erklärt.

Kann ich es aber zusätzlich noch hinbekommen, ein mouseover/hover zu platzieren, damit die icons sich synchron zu den restlichen (Text)Navigationspunkten verfärben, wenn man darüber scrollt?

Ich habe in einem anderen thread hier den Hinweis zu font awesome gelesen, deren shopping cart finde ich aber unschön, und ein icon das man für "Spenden" einsetzen könnte, haben sie nicht. Von daher ist diese Option wohl raus.

Vielleicht kann mir ja jemand weiterhelfen :)

Unsere eigentliche HP ist https://cafeconleche-vk.de, und meine aktuelle spielwiese ist https://mofuerccl.jimdo.com/

#14 RE: Icons als Links in der Navigation von Philoo 02.03.2022 20:16

Hallo lieber az,

ich hätte gerne auch ein Icon in der Navigationsleiste bei Jimdo Rome an Stelle eines Textes. Mit Hilfe der Seite designtest-barcelona.jimdo.com habe ich ein Bild in mein Centent-Bereich gepackt (als Html-Widget) und anschließend das von dir gepostetet CSS.Skript in den Head eingefügt (abgeändert mit meinen Angaben). Leider passiert gar nichts. Kannst du mir evtl. weiterhelfen? Was genau muss ich machen?
Du schreibst auf deiner Testseite "Der "Pseudo-Header" wird einfach in einem beliebigen Jimdo-Element* ganz unten im Content-Bereich der aktuellen Seite angelegt. Unter dieses Element wird das Skript für das Widget in ein html-Widget-Element kopiert und fertig".
Was genau für ein Skript muss ich in ein html-widget-element kopieren.

Ich hoffe jemand kann mir helfen.

LG

#15 RE: Icons als Links in der Navigation von az_ 12.03.2022 22:58

avatar

Der Pseudo Header hat aber nichts mit dem Icon in der Navigation zu tun. Das sind zwei verschiedene Programmierungen. Leider kann ich das hier so auf die Schnelle nicht erklären. Aber du kannst mich ja einmal anschreiben.
LG, az

Xobor Einfach ein eigenes Forum erstellen
Datenschutz