Twenty Seventeen - Logo ganz oben auf positionieren

xiam

hallo zusammen,

ich möchte das logo bei twenty seventeen zentriert und ganz oben auf der seite positionieren. leider klappt das i-wie nicht.

das zentrieren des logos klappt, aber die vertikale ausrichtung "quasi: on page top" klappt nicht.

hat jemand von euch einen tipp?

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

threadi

Wie sieht dein Versuch denn aus? Und soll das Logo mit oder ohne Seitentitel angezeigt werden?

xiam

Also ich möchte über dem Header ganz oben auf der Seite ein Logo haben. Diese Logo soll über die ganze Breite gehen, aber in der Höhe fixiert sein.

Für Mobilgeräte habe ich es mit folgenden Code soeben hinbekommen:

Code

/* Mobile Working */


.wrap {
    padding-left: 0em;
    padding-right: 0em;
    max-width: 100%;
    vertical-align: top;
}


.site-branding {
    padding: 0em 0;
}


.custom-logo-link {
    vertical-align: top;
        padding-right: 0em;
}
.has-header-image.twentyseventeen-front-page .site-branding, .has-header-video.twentyseventeen-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding {
    vertical-align: top;
}

Alles anzeigen

Bei Desktop bzw. ab einer Displaybreite von 48em (@Media screen and (min-width: 48em)) wird das Logo nicht wie gewünscht oben positioniert. Mit diesem Code habe ich es versucht:

Code

@media screen and (min-width: 48em) {
.custom-logo-link img, body.home.title-tagline-hidden.has-header-image .custom-logo-link img, body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
    max-width: 100%;
    }


.twentyseventeen-front-page.has-header-image .site-branding, .twentyseventeen-front-page.has-header-video .site-branding, .home.blog.has-header-image .site-branding, .home.blog.has-header-video .site-branding {
    margin-bottom: 610px;
}
   
}

Alles anzeigen

Wenn ich die Webseite im Chrome mit Entwicklertools öffne und den Hacken bei margin-bottom entferne (==disable margin-bottom), ist das Logo oben und mittig platziert.

Code

element.style {
    margin-bottom: 105px;
}

Leider kann ich das nicht i-wie als Code abfangen.... :(

threadi

Den Inline-Style kannst Du mit einer !important-Regel überschreiben um der von dir gewünschten Eigenschaft eine höhere Wertigkeit zu geben. Dein Code sorgt bei mir übrigens weder keinerlei Zentrierung. Imho würde das hier evtl. schon ausreichen wenn Du keinerlei Abstand von oben willst.

Code

.site-branding {
   top: 0;
   bottom: auto;
}

xiam

hab's eingefügt und es klappt!

super @threadi - vielen dank! :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Twenty Seventeen - Logo ganz oben auf positionieren

Jetzt mitmachen!