OceanWP Navigation unter Header-Image

Axel2301

Ich habe nun schon mir alles Mögliche ausprobiert, aber ich bekomme es einfach nicht hin, dass die Navigationsleiste unter dem Headerbild und das Logo über dem Headerbild steht.

Hier die SEITE

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

b3317133

Nach zwei Sekunden Googlesuche erscheint z.B. dieser Ansatz, hast Du das schon probiert?

Axel2301

Ja aber das beantwortet nicht meine Frage und löst auch nicht mein Problem.

Da das Logo in der Standard-Version quaisi auf dem Headerbild steht, habe ich es anders gelöst und das Logo erst einmal ohne Headerbild hochgeladen. Dann habe ich das Plugin "WP Header Images" installiert und folgenden Code in die header.php geladen und dort auch an sämtlichen Stellen probiert, aber das Logo und die Navigationsleiste scheinen irgendwie zusammenzuhängen...

PHP

<?php do_action('apply_header_images', '<div class="header_image"><h2 style="background-image: url(%url%);">%title%</h2></div>'); ?>

Insgesamt sieht es in der header.php jetzt so aus:

PHP

<?php
/**
 * The Header for our theme.
 *
 * @package OceanWP WordPress theme
 */ ?>


<!DOCTYPE html>
<html class="<?php echo esc_attr( oceanwp_html_classes() ); ?>" <?php language_attributes(); ?>>
<head>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <link rel="profile" href="https://gmpg.org/xfn/11">


   <?php wp_head(); ?>
</head>


<body <?php body_class(); ?> <?php oceanwp_schema_markup( 'html' ); ?>>


   <?php wp_body_open(); ?>


   <?php do_action( 'ocean_before_outer_wrap' ); ?>
  
   <div id="outer-wrap" class="site clr">
  
       <a class="skip-link screen-reader-text" href="#main"><?php esc_html_e( 'Skip to content', 'oceanwp' ); ?></a>


       <?php do_action( 'ocean_before_wrap' ); ?>
      
       <div id="wrap" class="clr">
      
           <?php do_action( 'ocean_top_bar' ); ?>
                      
           <?php do_action( 'ocean_header' ); ?>
          
           <?php do_action('apply_header_images', '<div class="header_image"><h2 style="background-image: url(%url%);">%title%</h2></div>'); ?>
          
           <?php do_action( 'ocean_before_main' ); ?>


           <main id="main" class="site-main clr"<?php oceanwp_schema_markup( 'main' ); ?> role="main">
          
           <?php do_action( 'ocean_page_header' ); ?>

Alles anzeigen

Axel2301

Ich möchte ja nur die Navigation die jetzt zwischen Logo und Headerbild steht, unter das Headerbild setzen. Das Logo soll oben über dem Headerbild stehen bleiben. Aber bisher wanderte das Logo mit der Navigation immer mit nach unten wenn ich den entsprechenden Code in der header.php an eine andere Stelle gesetzt habe.

Ich hoffe mir kann hier jemand helfen.

b3317133

Das heisst also, Du nutzt gar nicht das was OceanWP standardmässig zur Verfügung stellt, sondern irgendetwas selbstgestricktes? Das stand bei Deiner Frage leider nicht dabei. :rolleyes:

Aktuell ist das [FONT=Courier New]header_image[/FONT] komplett ausserhalb des [FONT=Courier New]site-header[/FONT] und Logo und Menü sind innerhalb des [FONT=Courier New]site-header[/FONT] und daher ist ein einfaches Verschieben bzw. Dazwischenschieben per CSS nicht möglich. Es sind wohl umfangreichere PHP Änderungen nötig wenn Du dieses Plugin verwenden willst, da kann man aber nur schwer helfen, da wohl kaum jemand zufällig genau diese Konstellation mit Deinen Einstellungen usw. zum Testen vorliegen hat. Bin daher hier raus, viel Erfolg!

Axel2301

Wie gesagt, wenn ich die Header Image Funktion von OceanWP nutze, dann steht das Logo auf dem Header-Image, es soll aber darüber stehen.

b3317133

Wenn Du die Header Image Funktion von OceanWP nutzen würdest, wäre das Logo und das Header-Image evtl. an einer Stelle, wo man es per CSS passend verschieben könnte. Ob das so wäre, das kann man in Deinem Link nicht nachvollziehen. Darüber dürfen sich jetzt gern andere den Kopf zerbrechen.

Axel2301

Ich probiere es noch einmal mit der Header Image Funktion von OceanWP

b3317133

Damit wäre sowas hier ein Ansatz, viel Erfolg mit dem Projekt.

Code

#site-header.medium-header .top-header-wrap {
    padding: 10px 0;
    background-color: #fff;
    margin-bottom: 350px;
}

Axel2301

Nein das führt leider nicht dazu, dass das Logo oben über dem Headerbild auf einem weißen Hintergrund steht und dieser Hintergrund soll sich auch über die gesamte Breite der Seite strecken.

Axel2301

Das Thema kann dicht gemacht werden, ich probiere etwas ganz anderes aus.

b3317133

Zitat von Axel2301

.. dass das Logo oben über dem Headerbild auf einem weißen Hintergrund steht und dieser Hintergrund soll sich auch über die gesamte Breite der Seite strecken.

Das führte eigentlich genau dazu...

Axel2301

Nein leider tat es das nicht.

b3317133

Hier im Browser führte es genau dazu.

Zu was führte es denn bei Dir?

Ohne jegliche Angaben und bei derzeit nicht erreichbarer Seite kann man schwer herausrausfinden, wo das Problem liegen könnte und so kann es auch keinem späteren Mitleser helfen, ein ähnliches Problem zu lösen. Dafür ist dieses Forum vor allem auch da.

Axel2301

Es führte lediglich dazu, dass der Header wesentlich größer wurde, also in der Höhe.

Habe die Seite wieder aufgemacht, aber ich arbeite gerade daran, daher kann sich immer wieder mal etwas verändern.

b3317133

Hier sieht es derzeit so aus:

Und das CSS aus #9 führt dazu:

Axel2301

Ich habe den Code jetzt mal unter "Zusätzliches CSS" eingefügt, schau selbst was passiert.

Code

#site-header.medium-header .top-header-wrap {
    padding: 10px 0;
    background-color: #fff;
    margin-bottom: 350px;
}

In deinem Screenshot sieht es genau so aus wie ich es haben möchte.

Oder soll der Code gar nicht in "Zusätzliches CSS"?

b3317133

Ersetze diese Zeile

Code

#site-header.medium-header .top-header-wrap {

durch diese Zeile:

Code

header#site-header.medium-header .top-header-wrap {

Offenbar wird nach "Zusätzliches CSS" noch CSS von OceanWP ausgegeben, das einen Wert beeinflusst bzw. überlagert.

Das sieht man über "Element untersuchen" im Browser, eine üblicherweise oft verwendete Standardfunktion wenn es um Website-Entwicklung geht.

Der Screenshot enststand mit dem CSS am Ende von head eingefügt.

Axel2301

YES das war es :)

Vielen Dank !!!

Axel2301

Nächste Problem, leider ist deine Lösung nicht responsive.

Schau dir das mal auf einem Smartphone oder Tablet an was dann passiert....

Willkommen! Melden Sie sich an oder registrieren Sie sich.

OceanWP Navigation unter Header-Image

Jetzt mitmachen!