Wie man Header Höhe und Größe anpassen Logo mit CSS in Wordpress

Question

Dies ist meine website. Ich arbeite mit Wordpress und mein Thema ist Sonata (Themeforest).

Irgendwann habe ich einige Änderungen an der Höhe der Menüleiste im CSS-Code vorgenommen, aber jetzt möchte ich es wieder verkleinern (verhältnismäßiger). Auch möchte ich das Logo ansprechen, so dass es in die Menüleiste passt.

Kann mir jemand mit dem CSS-Code helfen? Ich weiß nicht, welcher Teil des Codes sollte ich ändern, aber ich glaube, dass es dieses ist (korrigiert mich wenn dies nicht der Fall):

---

/* Header 
-------------------------------------------------------------------------------------- */ 
#wi-header { 
    width:100%; 
    height:40px; 
    position:relative; 
    background:#fff; 
    z-index:9999; 
    transition:height .3s ease-out; 
    } 
#wi-header .container { 
    position:relative; 
    } 
#wi-logo a { 
    display:block; 
    color:#333; 
    font-size:34px; 
    font-family:"Oswald", sans-serif; 
    text-decoration:none; 
    text-transform:uppercase; 
    margin:0; 
    height:auto; 
    } 
#wi-logo img { 
    max-height:auto; 
    display:block; 
    class:img-responsive; 
    } 
.site-description { 
    color:#999; 
    font-style:italic; 
    margin-top:10px; 
    } 
.site-description a { 
    color:#333; 
    text-decoration:underline; 
    } 

---

Danke im Voraus für Ihre Hilfe!

Answer 1

Ich habe style = "position: absolute; height: 100%;" zu einem Img-Tag und es wurde behoben.

Answer 2

Wenn Sie Ihr Layout optimieren möchten, empfehle ich Ihnen, HTML & CSS zu lernen. Das heißt, Ihr Logo nimmt die Breite seines übergeordneten Elements, d. H. <div class="span4">. Dein Logo hat also eine Breite von 100% im Vergleich zu diesem div. Eine Lösung könnte sein:

#wi-logo img { 
    width: 50%; 
} 

die Ihr Logo die Hälfte der Breite seiner Eltern machen wird. Aber es gibt mehrere Möglichkeiten, je nachdem, was Sie wirklich wollen. Noch einmal, ich schlage vor, Sie lernen die Grundlagen. MDN ist ein großartiger Ort, um anzufangen.

Edit:

In den meisten Fällen ist das Beste, was Sie tun können, wenn Sie ein Thema ändern wan't, ist ein Kind Thema zu erstellen. Es ist nie eine gute Übung, den Code eines vorhandenen Themas zu ändern. Wenn es aktualisiert wird, verlieren Sie möglicherweise Ihre Änderungen. Werfen Sie einen Blick auf https://codex.wordpress.org/Child_Themes. Die kurze Antwort: Erstellen Sie ein Child Theme mit mindestens einer style.css Datei und nehmen Sie Ihre Änderungen vor. Die style.css sollte mindestens so kommentiert an der Spitze der es enthält:

/* 
Theme Name: Your Child Theme Name 
Template:  Sonata 
*/ 

Wo Template das übergeordnete Thema ist, Sonata in Ihrem Fall. Wählen Sie dann im Backend Ihr Thema als Thema für Ihre Website aus.

Last but not least: imho, sollten Sie nicht die CSS für die span Div ändern. Wahrscheinlich ist dies Teil eines (Raster-) Frameworks wie Foundation oder so, das wahrscheinlich eine Anordnung von 12 Spalten hat, wobei Span-4 4/12 von 100% der Breite bedeutet. Das ist die Standardstruktur und soll nicht geändert werden. Aber mach weiter und experimentiere.