"Sticky Logo" auf allen Seiten darstellen

Naturdetektiv

Salüü

Ich möchte gerne auf der rechten Seite immer am gleichen Ort ein Logo in meine Seite einfügen. Dieses soll auf jeder Seite zu sehen sein, so wie hier: http://www.gruenwerk.ch/gartenplanung

Ich habe schon nach allen möglichen Schlagwörtern und Plugins gesucht, aber nichts gefunden, was funktioniert hat. Liegt vielleicht daran, dass ich es bisher nicht geschafft habe, auf meinen Seiten ein Widget mit dem Logo einzufügen... Aber das Bild sollte eben eh höher als ein Widget kommen, damit es über dem Headerbild liegt. Kennt jemand ein einfaches Plugin, welches diese Funktion ermöglicht, oder kann man das mit etwas CSS selber basteln? Ich freue mich über jegliche Tipps! :)

Ich verwende WordPress 4.9.8 mit dem Theme Twentyseventeen
Link zur Seite: http://naturdetektive.ccw01.snowflakehosting.ch/team/

Vielen herzlichen Dank für eure Hilfe!
Nadia

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Sailor56

Ja... selber 'basteln' mit CSS ist wohl der beste Weg, bevor du dir mit irgendwelchen zusätzlichen Plugins deine Seite vollmüllst!
Auf deiner Beispielseite ist das so gemacht worden:

HTML

<div id="logo" class="hide-mobile">
   <a href="/">
      <img src="images/logo_gruenwerk.svg" alt="Grünwerk">
   </a>
</div>

und das zugehörige CSS sieht so aus:

HTML

#logo {
    position: fixed;
    width: 48px;
    height: 200px;
    right: -1px;
    top: 50%;
    margin-top: -100px;
}


@media screen and (max-width: 800px) {
   .hide-mobile {
       display: none;
   }
}

Alles anzeigen

Ich denke, das kannst du sehr leicht in deine eigene Seite (mit den für dich passenden Werten) einbauen.

Naturdetektiv

Hoi Sailor56

Wow, vielen vielen Dank für die schnelle Antwort! Ich hab das für die Unterseite http://naturdetektive.ccw01.snowflakehosting.ch/konzept/ gleich ausprobiert.

Sorry für meine Anfängerfrage, aber das ist meine erste Website :P. Drum noch zwei weitere Fragen:
1. Der untere Code (CSS) kommt ins zusätzliche CSS, der obere Code (HTML) kommt in die jeweilige Seite, richtig? Muss ich den also bei jeder Seite einzeln einfügen? Und geht das auch für die Startseite? Oder kann ich das auch irgendwie ins zusätzliche CSS einbauen? Soweit ich das verstanden habe, kann man da jedoch keinen HTML-Code reintun. Oder kann man den irgendwie "umstellen"?

2. Ums Logo gibt es jetzt einen weissen Rahmen. Woher kommt der und kann ich den ausblenden? Und gibt es eine Möglichkeit, das Logo über den Menübalken laufenzulassen?

Vielen Dank und lieber Gruss
Nadia

nature225

Kannst den HTML Code auch in die header.php einbauen, dann ist der Button auf jeder Seite zu sehen.

2. in die css Angabe noch z-index: 3; hinzufügen
Der weiße Rahmen kommt durch folgender css Angabe:

.entry-content a img{
-webkit-box-shadow: 0 0 0 8px #fff;
box-shadow: 0 0 0 8px #fff;
}
style.css Zeile 1281

Sailor56

zu 1.
Ja... der CSS Code kommt ins zusätzliche CSS (im Customizer). Änderungen immer dort machen, damit sie nicht bei einem Update überschrieben werden
Und beim HTML Code hast du die Wahl. So wie du es jetzt gemacht hast auf jede Seite. auf der das Logo angezeigt werden soll einfügen.
Oder du nimmst dir einen Seitenteil, der eh auf jeder Seite vorhanden ist (header.php oder footer.php) und fügst den HTML Code dann dort einmalig ein. Dazu müsstest/solltest du aber zuvor ein Child-Theme anlegen und die Änderungen dann in der entsprechenden Datei im Child-Theme durchführen. Die Dateien im Original-Theme werden bei einem Update überschrieben - im Child-Theme bleiben die Änderungen erhalten.
Den weißen Rahmen bekommst du weg mit :

HTML

.entry-content a img {
    -webkit-box-shadow: none;
    box-shadow: none;
}

Sollte dann ein Strich unterhalb des Logos zu sehen sein, dann bekommst du den weg mit:

HTML

.entry-content #logo a,
.entry-content #logo a:hover {
   -webkit-box-shadow: none;
    box-shadow: none;
}

und um das Logo mehr in den Vordergrund zu rücken, müsstest du zu dem #logo noch folgendes hinzufügen:

HTML

z-index: 1000;

Naturdetektiv

YESSS! So funktioniert alles, und erst noch ganz einfach und ohne Plugin! Tausend Dank nature225 und Sailor56, das hätte ich nie selber geschafft! :) Liebe Grüsse und eine gute Woche

fly1402

Hallo nature225,

ich würde das auch gerne umsetzen, wenn ich jedoch den Code in die header.php kopier,
dann bekomme ich einen Fehler angezeigt.

Ich habe die Wprdpress Version 5.3

VG
fly

Tuba

Hallo zusammen,
schließe mich jetzt der hier oben gestellten Frage mal an :)
Ich habe ebenso ein Problem mit dem Logo sticky und auf allen Seiten, habe den Elementor pro.
bei dem Theme Builder habe ich die Kopfzeile platziert, allerdings weiss ich noch nicht, wo ich den Platzhalter gegen mein Logo ersetzen kann.

Das ich Anfängerin bin brauche ich nicht noch zu erwähnen, oder ;-)
Besten Dank schon mal.
Leider komme ich trotz diesem learn Link nicht weiter
https://elementor.com/help/site-logo…_campaign=learn

Willkommen! Melden Sie sich an oder registrieren Sie sich.

"Sticky Logo" auf allen Seiten darstellen

Jetzt mitmachen!