Verwenden Sie verschiedene Logos für mobile Version

Question

Ich möchte ein anderes Logo für meine mobile Version verwenden.

Ich fand heraus, dass Sie ein anderes Logo in Ihrem HTML-Quellcode hinzufügen und dann in CSS definieren, welches Logo basierend auf der Seitengröße angezeigt wird.

Mein Problem ist, dass ich Wordpress verwende und nicht wirklich auf den Quellcode zugreifen kann. Ich kann nur etwas in die functions.php-Datei schreiben.

Mein Logo ist Stellen in der Navigationsleiste, die es auch schwieriger machen.

Würde soooo dankbar für jede Hilfe :)
Daniel

My Page

Answer 1

Ja können Sie Medienanfragen verwenden, um das Beispiel zu tun:

.mobile-logo-class { 
    display:none; 
} 

@media screen and (max-width: 768px) { // 768px or your break point 

    .mobile-logo-class { 
     display: inline-block; // or block 
    } 

    .desktop-logo-class { 
     display:none; 
    } 

} 

Oder Sie können die Verwendung " Bild "Tag aber sei vorsichtig für IE Support: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015

Answer 2

Wenn Ihr Design die Optionen für das mobile Logo bietet, können Sie im Normalfall verschiedene Logos für Ihre mobilen Bereiche hochladen. Wenn Sie keine Optionen für das mobile Logo in Ihrem Design haben, können Sie die Medienabfragen verwenden Weg für Handys Breite oder können Sie die Plugins verwenden, um verschiedene Logo für Ihre Website in mobilen etwas wie diese zu zeigen.

SCHRITT 1: OK zuerst kopieren Sie den Code des Logos in Ihrer Header-Datei, die das Protokoll auf Ihrem Desktop aufruft, kopieren Sie den Code und fügen Sie es unter den gleichen Tauchgang jetzt entfernen Sie den PHP-Code und ändern Sie die Div-Klasse, und gib dort <img src=" your image path"> und speichere es. Sie können auch HTML für Bild schreiben

SCHRITT 2: Jetzt in CSS verwenden CSS zum Ausblenden. etwas wie

.logo2-img { 
    display: none; 
} 

hier logo2 ist Ihre 2. Div-Klasse.

Schritt 3: Jetzt schreibt CSS mit Medienabfrage

@media screen and (max-width: 768px) { // 768px or your break point 

    .logo2-img{ 
     display: block; // 
    } 

    .desktop-logo-class { 
     display:none; 
    } 

} 

das ist es leider für schlechtes Englisch