Positionierung Slideshow im Header

[Thobie]

Moin, Moin,

ich habe meinem Foodblog https://www.nudelheissundhos.de ein neues Design, sprich Theme, verpasst.

Ich bin derzeit mit fast allem zufrieden, will dem Theme aber mit CSS beibringen, dass die Slideshow im Header sich nicht über die ganze Breite des Browserfensters erstreckt. Sondern nur auf der Breite des Inhalts der Site. Sprich, etwa so breit wie von Logo links bis Menü rechts.

Die Slideshow ist mit dem Plugin MetaSlider eingerichtet.

Da das Theme kein Widget für einen Header mit Slideshow hat, habe ich den MetaSlider-Code in die header.php eingebunden:

<?php echo do_shortcode('[metaslider id="41037"]'); ?>

Wer kann helfen?

Grüße aus Hamburg

Thobie

 

[scatello]

die Slideshow im Header sich nicht über die ganze Breite des Browserfensters erstreckt.

Tut sie ja auch nicht?! Thema wohl erledigt, oder?

 

[Thobie]

Sie erstreckt sich im Browserfenster auf dem Desktop-Mac über die ganze Breite des Fensters und nicht nur über die Breite der Site.

 

[Thobie]

Entschuldigung, ich habe das eben erst am Desktop geprüft und da hat der Slider tatsächlich die Breite der Site. Da hat anscheinend über Nacht die Einstellung in MetaSlider, den Slider nicht auf 100 % zu ziehen, gewirkt.

Anyway, jetzt brauche ich nur noch Hilfe beim schwarzen Balken des Menüs, das ebenfalls nicht über die ganze Browserfenster-Breite laufen soll.

 

[scatello]

Wenn mich nicht alles täuscht, hat man dir im WordPress-Forum mehrfach gesagt, wie man soetwas selber herausfinden kann.

Verpasse der Klasse bottom-header-row eine Breite und margin: 0 auto

 

[Thobie]

Funktioniert mit diesem Code:

.bottom-header-row {
background-color: var(--sydney-dark-background);
z-index: 999;
max-width: 1200px;
margin: 0 auto;
}

Darf ich eine Frage anhängen? Das Theme hat in seinen Einstellungen die Möglichkeit, ein Logo in den Header einzubinden („Nudelheissundhos – Nudeln, Fleisch und Sauce … und ein Stück Kuchen“ und auch dessen Höhe in Pixeln zu wählen, von 0–500 px. Ich habe das Logo schon vor dem Hochladen in das Foodblog mit PhotoZoom um 300% hochgerechnet. Ich möchte das Logo im Foodblog deutlich größer als zur Zeit haben. Ich kann jedoch über diese genannte Option nur bis etwa 80 px Höhe vergrößern, alle anderen Einstellungen von 200, 300 oder 400 px werden nicht übernommen. Ist da irgend eine Beschränkung im Header vorhanden, dass das Logo nicht größer sein kann?

 

[scatello]

Auch das lässt sich mit Hilfe der Browser-Tools herausfinden.

 

[Thobie]

Lösung des Problems:

@media (min-width: 992px) {
    .top-header-row .col-md-4:not(.header-elements) {
        width: 100%;
    } 
}

Damit kann ich das Logo, für das zwar angeblich eine Höhe von 0–500 px möglich ist, auf eine maximale Höhe von 162 px einstellen, was aber sehr groß ist. Ich habe nun eine Höhe von 140 px gewählt.