Website-Header-Widget auf dem Desktop hat mobile Header vermurkst

Question

Ich habe vor kurzem ein Widget zu meiner Website-Header für den Desktop-Modus hinzugefügt. Ich hatte Schwierigkeiten, dieses Widget in die gleiche Zeile und rechts neben das Logo zu bekommen, aber ich habe es schließlich bekommen. Dabei scheint es, als habe ich versaut, wie die Kopfzeile auf mobilen Geräten aussieht (siehe z. B. twoguysplayingzelda.com). Da 65% meiner Zuschauer über Mobilgeräte sind, möchte ich das beheben, habe aber noch nicht herausgefunden, wie. Ich möchte, dass das Logo zentriert und vollständig sichtbar ist, und das Menüsymbol auf der linken Seite (es wird verwendet, bevor ich die Änderung vorgenommen habe). Ich bin mir bewusst, dass ich Code in den Responsive-Bereich meiner style.css hinzufügen muss. Unten ist, was ich derzeit für meinen Header in CSS (Desktop-Abschnitt) habe. Ich wusste nichts über CSS und HTML, bevor ich meine Website startete, also bin ich immer noch ein wenig noob. Danke für Ihre Hilfe

div#header-widget-area { 
    float: right; 
} 

.header { 
    padding-top: 10px; 
    padding-bottom: 60px; 
    color: #01B3D9; 
} 

.header .cover { 
    background: rgba(29,29,29,0.0); 
} 

.header-inner { 
    position: relative; 
} 

.header .blog-logo { 
    text-align: left; 
} 

.header .logo { 
    display: inline; 
    float: left; 
} 

.header .logo img { 
    max-height: 50px; 
    width:auto; 
} 

Answer 1

Das Menüsymbol wird durch das Logo auf der rechten Seite geschoben, weil sie beide float: left haben.

Versuchen Sie, float: left von .logo zu entfernen, und fügen Sie display: inline-block zu .blog-logo hinzu. Das sollte beide Probleme beheben.