Logo Position verändern in Twenty Seventeen

Forst

Hallo, ich hab als absoluter Neuling eine Seite in WP mit dem Theme Twenty Seventeen erstellt. Mein erster Fehler war, viele Änderungen in der Style.css zu machen. Erst danach bin ich auf die Möglichkeit/Notwendigkeit eines Child Theme gekommen. Hab aber das Übertragen aller Änderungen im Nachhinein nicht geschafft, daher die Änderungen in der Style.css beibehalten und die Update Funktion ausgeschaltet. Jetzt weiß ich zwar, wie dumm diese Vorgangsweise war, aber irgendwann werde ich mich nochmal damit beschäftigen, dieses Problem zu lösen....

Mein derzeitig größeres Problem ist: ich möchte das Logo ganz an den linken Seitenrand verschieben. Ich habe es derzeit so gelöst, dass ich das Logo einfach in Photoshop in das Headerbild eingefügt habe. Auf mobilen Geräten ist es aber nicht zu sehen weil ausserhalb des Bildbereiches, und die Verlinkung auf die Homepage kann ich so natürlich auch vergessen. Unter dem Link kann man sehen was ich meine, das "echte" Logo ist hier klein und unter dem Menü, es soll aber dorthin wo jetzt das große Logo am linken Rand ist. Und auf der Startseite selbst sollte das Logo überhaupt nicht erscheinen, da passt es mir so wie es im Headerbild ist.

Jetzt habe ich schon einige Zeit damit verbracht, alle möglichen Lösungen, die ich ergoogeln konnte, auszuprobieren, allein, es half nichts. Ich hoffe jetzt, es kann mir wer von den Profis hier weiterhelfen.

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

SirEctor

Du kannst zusätzliches CSS auch im Customizer eingeben. Versuch mal das:

CSS

.site-branding .wrap {
    max-width: 100% !important;
}

Nevery

Wäre auch mein Ansatz, aber noch etwas ergänzt:
.site-branding .wrap {max-width: 100% !important; padding-left:0px; padding-right:0px;}
.site-branding {padding-top:0px;}
.home .site-branding {display:none !important;}

Nevery

Hab Dir mal kurz Deine Änderungen an der style.css rausgefischt:

Code

body,
button,
input,
select,
textarea {
    color: #2c3e46;
}


input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #2c3e46;
}


a {
    color: #2c3e46;
}


.navigation-top a {
    color: #8aaa00;
    font-weight: 700;
}


.navigation-top .current-menu-item > a,
.navigation-top .current_page_item > a {
    color: #d6f708;
        font-weight: 1000;
}


.custom-logo-link {
    display: left;
}


.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
    height: 1200px;
    height: 1vh;
}


.page .panel-content .entry-title,
.page-title,
body.page:not(.twentyseventeen-front-page) .entry-title {
    color: #2c3e46;
}


h2.widget-title {
    color: #767676;
}


@media screen and (min-width: 48em) {
    .main-navigation ul {
        background: #2c3e46;
                background: rgba(44, 62, 70, .8);
        }
        
    .twentyseventeen-front-page.has-header-image .custom-header-media,
    .twentyseventeen-front-page.has-header-video .custom-header-media,
    .home.blog.has-header-image .custom-header-media,
    .home.blog.has-header-video .custom-header-media {
        height: 1vh;
    }
    
    .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
    .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
    .admin-bar.home.blog.has-header-image .custom-header-media,
    .admin-bar.home.blog.has-header-video .custom-header-media {
        height: calc(1vh - 32px);
    }
}

Alles anzeigen

...das sollte es gewesen sein wenn Du nicht noch an den anderen Dateien warst, also hopp, Childtheme ;-) wenn Du das nicht manuell sondern mit https://de.wordpress.org/plugins/child-theme-configurator/ machst kannst Du auch direkt alle Customizer-Einstellungen, Widgets usw. übernehmen lassen.

Forst

Es funktioniert, Wahnsinn! (nicht dass ich daran gezweifelt hätte!). Danke vielmals, und dann auch gleich noch die zusätzliche Hilfe betreffs meiner bisherigen laienhaften Vorgangsweise in der Style.css. Ich weiß gar nicht wie ich mich bedanken soll, vor allem, weil ich hier sicher kaum jemandem helfen könnte... Vielen Dank, SirEctor und Nevery, Ihr seid ur leiwond!
Und Nevery, ich werde mich am Wochenende hinsetzen und die Übertragung in das Child Theme machen, jetzt pack ich´s.

Nevery

Zitat von Forst

ur leiwond!

...das musste ich jetzt erstmal googeln... :-D
Viel Erfolg mit dem Childtheme!

the_wizard

Hallo miteinander,

wie bekomme ich denn nur das Logo nach oben links?

Damit rutscht alles ja einfach nach links (unten):
.site-branding .wrap {
max-width: 100% !important;
}

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Logo Position verändern in Twenty Seventeen

Jetzt mitmachen!