Wie bekomme ich das Logo über die Navi?

Gelöst

tomjoad2023

(@tomjoad2023)

Hallo,

ich hätte das Logo gerne über der orangefarbenen Navi. Es soll also weiße Fläche über der Navi sein und links das Logo (das ich dann verkleinern würde und indem ich das Wort „FORUM“ rausnehmen würde).

Ist das möglich?

Voelen Dank vorab,

Thomas

` wp-core

version: 6.6.2
site_language: en_US
user_language: en_US
timezone: Europe/Berlin
permalink: /%postname%/
https_status: true
multisite: false
user_registration: 1
blog_public: 1
default_comment_status: undefined
environment_type: production
user_count: 3
dotorg_communication: true wp-paths-sizes

wordpress_path: /is/htdocs/wp11126241_JCN6M4RSMD/www/mim-compass.com/htdocs/mim-forum
wordpress_size: 62.27 MB (65294480 bytes)
uploads_path: /is/htdocs/wp11126241_JCN6M4RSMD/www/mim-compass.com/htdocs/mim-forum/wp-content/uploads
uploads_size: 622.43 KB (637372 bytes)
themes_path: /is/htdocs/wp11126241_JCN6M4RSMD/www/mim-compass.com/htdocs/mim-forum/wp-content/themes
themes_size: 30.67 MB (32164513 bytes)
plugins_path: /is/htdocs/wp11126241_JCN6M4RSMD/www/mim-compass.com/htdocs/mim-forum/wp-content/plugins
plugins_size: 80.00 MB (83890648 bytes)
fonts_path: /is/htdocs/wp11126241_JCN6M4RSMD/www/mim-compass.com/htdocs/mim-forum/wp-content/uploads/fonts
fonts_size: directory not found
database_size: 3.04 MB (3190417 bytes)
total_size: 176.60 MB (185177430 bytes) wp-dropins (1)

advanced-cache.php: true wp-active-theme

name: OceanWP (oceanwp)
version: 3.6.0
author: OceanWP
author_website: https://oceanwp.org/about-oceanwp/
parent_theme: none
theme_features: core-block-patterns, widgets-block-editor, align-wide, wp-block-styles, responsive-embeds, editor-styles, editor-style, menus, post-formats, title-tag, automatic-feed-links, post-thumbnails, custom-header, custom-logo, html5, woocommerce, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider, customize-selective-refresh-widgets, widgets
theme_path: /is/htdocs/wp11126241_JCN6M4RSMD/www/mim-compass.com/htdocs/mim-forum/wp-content/themes/oceanwp
auto_update: Disabled wp-themes-inactive (3)

Twenty Twenty-Four: version: 1.2, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Three: version: 1.5, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Two: version: 1.8, author: the WordPress team, Auto-updates disabled wp-plugins-active (7)

Asgaros Forum: version: 2.9.0, author: Thomas Belser, Auto-updates enabled
Elementor: version: 3.24.3, author: Elementor.com, Auto-updates enabled
Elementor Header & Footer Builder: version: 1.6.42, author: Brainstorm Force, Nikhil Chavan, Auto-updates disabled
Envato Elements: version: 2.0.14, author: Envato, Auto-updates enabled
Ocean Extra: version: 2.3.0, author: OceanWP, Auto-updates enabled
WP Mail SMTP: version: 4.1.1, author: WP Mail SMTP, Auto-updates disabled
WP Super Cache: version: 1.12.4, author: Automattic, Auto-updates disabled wp-plugins-inactive (3)

Akismet Anti-spam: Spam Protection: version: 5.3.3, author: Automattic - Anti-spam Team, Auto-updates disabled
Image Optimizer by Elementor – Compress, Resize and Optimize Images: version: 1.5.2, author: Elementor.com, Auto-updates disabled
Rank Math SEO: version: 1.0.228, author: Rank Math, Auto-updates disabled wp-media

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1690
imagemagick_version: ImageMagick 6.9.10-23 Q16 x86_64 20190101 https://imagemagick.org
imagick_version: 3.7.0
file_uploads: 1
post_max_size: 32M
upload_max_filesize: 32M
max_effective_size: 32 MB
max_file_uploads: 50
imagick_limits:
imagick::RESOURCETYPE_AREA: 8 GB
imagick::RESOURCETYPE_DISK: 1.844674407371E+19
imagick::RESOURCETYPE_FILE: 6144
imagick::RESOURCETYPE_MAP: 8 GB
imagick::RESOURCETYPE_MEMORY: 4 GB
imagick::RESOURCETYPE_THREAD: 1
imagick::RESOURCETYPE_TIME: 1.844674407371E+19
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, ART, ARW, AVI, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DJVU, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, GV, H, HALD, HDR, HEIC, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WEBP, WMF, WMV, WMZ, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
ghostscript_version: 9.27 wp-server

server_architecture: Linux 6.1.31-xenu-he x86_64
httpd_software: Apache
php_version: 8.2.20-he.0 64bit
php_sapi: apache2handler
max_input_variables: 1000
time_limit: 30
memory_limit: 256M
max_input_time: 60
upload_max_filesize: 32M
php_post_max_size: 32M
curl_version: 7.64.0 OpenSSL/1.1.1n
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: false
current: 2024-09-23T09:05:39+00:00
utc-time: Monday, 23-Sep-24 09:05:39 UTC
server-time: 2024-09-23T11:05:38+02:00 wp-database

extension: mysqli
server_version: 8.0.36-28
client_version: mysqlnd 8.2.20-he.0
max_allowed_packet: 50331648
max_connections: 1100 wp-constants

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /is/htdocs/wp11126241_JCN6M4RSMD/www/mim-compass.com/htdocs/mim-forum/wp-content
WP_PLUGIN_DIR: /is/htdocs/wp11126241_JCN6M4RSMD/www/mim-compass.com/htdocs/mim-forum/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: true
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: Undefined
WP_DEVELOPMENT_MODE: undefined
DB_CHARSET: utf8mb4
DB_COLLATE: undefined wp-filesystem

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
fonts: not writable wp_mail_smtp

version: 4.1.1
license_key_type: lite
debug: No debug notices found.
lite_install_date: Sep 22, 2024 @ 11:48am

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten – 1 bis 15 (von insgesamt 18)

1 2 →

Moderator Bego Mario Garde
(@pixolin)

vor 2 Monaten, 2 Wochen
Du kannst mit dem Block-Editor eine eigene Vorlage für den Header erstellen und bist dabei flexibel, was wo und wie angeordnet wird. Vorgehensweise:
1. Menü OceanWP > My Library > Add New
2. Du fügst einen beliebigen Titel als Bezeichnung deines neuen Header ein. Der Titel taucht sonst nirgendwo auf.
3. Im Inhalt fügst du einen neunen Block ein. Dazu gehst du auf das blaue + Icon oben links, dass sich dann in ein x verwandelt (1). Du wählst den Tab Vorlagen (2) und die Kategorie Header (3). Dort wählst du das Website-Logo (4) aus.
4. Nun gehst du auf die Listenansicht der Blöcke (1), wählst den Stapel (2), den du in der Sidebar (3) bearbeiten kannst. Unter Layout > Anordnung (4) wählst du linksbündige Anordnung („links das Logo“). Klickst du das Logo direkt an, kannst die Größe ändern oder die Grafikdatei ersetzen. (→ „das ich dann verkleinern würde und indem ich das Wort „FORUM“ rausnehmen würde“).

(Den Screenshot habe ich zu spät erstellt. Er enthält bereits das Navigationsmenü, das wir erst im nächsten Schritt einfügen. Sorry.)

5. Unter dem Logo fügst du den Navigationsmenü-Block ein und wählst das bereits erstellte Navigationsmenü aus. Markiere das Navigationsmenü (1), wähle das Icon zur Ausrichtung (2) und verteile die Links im Menü gleichmäßig mit „Abstand zwischen den Elementen“ in der Zeile (3).

6. Achte darauf, dass dein Header nur eine „weite Breite“ haben darf. Sonst wandert dir das Logo auf großen Bildschirmen zu sehr an den Rand. Dazu wählst du die Listenansicht der Blöcke (1), wählst den Block „Centered header with logo“ aus (2), klickst das Ausrichtungs-Icon an (3) und wählst (abweichend von der Voreinstellung im Screenshot) „Weite Breite“ (4).

Vergiss nicht das Ganze zu speichern.

7. Nun wechselst du in Design > Customizer > Header > Allgemein und wählst im Pulldown-Feld Stil: Individueller Header. Im Pulldown-Feld Vorlage wählen nimmst du den Header, den du gerade erstellt hast und dem du in Titel einen Namen zugewiesen hast.

Das Ergebnis sieht nach Veröffentlichung der Änderungen im Customizer so aus:

Wenn dir der Header so noch nicht gefällt, kannst du jederzeit über OceanWP > My Library den Header bearbeiten und z.B. das Navigationsmenü farbig hinterlegen (im Screenshot hellblau), eine zusätzliche Linie einziehen, das Website-Icon ersetzen usw.

Was du dabei nicht hinbekommst, kann dann (entsprechende Kenntnisse vorausgesetzt) mit eigenen CSS-Regeln ergänzt werden. Das Eingabefeld findest du im Customizer unter Zusätzliches CSS.
Thread-Starter tomjoad2023
(@tomjoad2023)

vor 2 Monaten, 2 Wochen

Vielen herzlichen Dank für die Hilfe und Mühe!

EIne kurze Verständnisrückfrage: Das schon unter DESIGN => Menü angelegte Menü / die Navigation kommt hier nicht mehr zum Zuge, richtig?

Moderator Angelika Reisiger
(@la-geek)

vor 2 Monaten, 2 Wochen

Da du den Header & Footer Builder von Elementor installiert hast und vermutlich auch verwendest, kannst du doch innerhalb des Containters des Headers oben eine weitere Sektion hinzufügen, dieser einen weißen Hintergrund geben und das Logo dort einfügen?

Thread-Starter tomjoad2023
(@tomjoad2023)

vor 2 Monaten, 2 Wochen

Vielen Dank, Angelika. Ursprünglich habe ich die Seite ohne Elementor angelegt und dort im Block einfach nur [FORUM] eingefügt, um das Forum anzuzeigen.

Dann habe ich die Seite mit Elementor bearbeitet – einfach nur, weil ich das von anderen Seiten kenne – und dann war [FORUM] in einem Container. Komischerweise funktioniert das Forum dann nicht mehr. Daraufhin habe ich die Seite wieder in den WordPress-Modus gestellt.

Den Footer habe ich mit Header & Footer Builder angelegt. De Header bislang nicht, weil das WordPress-Menü unter DESIGN=>Wordpress super ausreichte. Und auch, weil ich dort keinen Header im freien Angebot fand, der komplett kostenfrei war – es waren immer irgendwelche kostepnflichtigen Bestandteile drin. Nur bekam ich halt das Logo nicht darüber.

Jetzt probiere ich gerade Begos Idee eines individualisierten Headers aus.

Die Alternative wäre, doch noch den Header über Header & Footer Builder zu bauen und die kostenpflichtigen Bestandtele eibfach zu löschen.

Moderator Bego Mario Garde
(@pixolin)

vor 2 Monaten, 2 Wochen

@tomjoad2023

EIne kurze Verständnisrückfrage: Das schon unter DESIGN => Menü angelegte Menü / die Navigation kommt hier nicht mehr zum Zuge, richtig?

Doch, in Schritt 5: „Unter dem Logo fügst du den Navigationsmenü-Block ein und wählst das bereits erstellte Navigationsmenü aus.“

… oder alles so, wie Angelika (@la-geek) es gerade beschrieben hat.

Ich nutze Elementor selber nicht und habe deshalb den wahrscheinlich etwas komplizierteren Weg mit dem Block-Editor beschrieben. Wenn du aber bereits den Header-Footer-Builder verwendest, gibt es sicher noch andere Möglichkeiten (bis hin zu einem komplett mit Elementor gestalteten Header).

Thread-Starter tomjoad2023
(@tomjoad2023)

vor 2 Monaten, 2 Wochen

So hab ich dich in Schritt 5 auch verstanden. Ich weiß aber nicht wie ich das schon erstelle Navi-Menü einfügen kann. Es wird mir zumindest nicht angezeigt.

Moderator Bego Mario Garde
(@pixolin)

vor 2 Monaten, 2 Wochen

Achso.

Du hast den Block Navigationsmenü unter dem Logo eingefügt? Dann klickst du es an (1), gehst in die Sidebar (2) (Tab Block sollte ausgewählt sein) und klickst bei Menü auf das Kebab-Menü (3), um dann ein vorhandenes Menü (in meinem Fall „Main“) auszuwählen. In dem Popup-Fenster von (4) ist ganz unten auch ein Punkt, um ein neues Menü anzulegen.

Thread-Starter tomjoad2023
(@tomjoad2023)

vor 2 Monaten, 2 Wochen

Yes, habs gerade entdeckt. Vielen lieben Dank!

Thread-Starter tomjoad2023
(@tomjoad2023)

vor 2 Monaten, 2 Wochen

Wir immer, entstehen dann wieder Folgeprobleme. Ich kann das Logo im Zentrum der Seite – also unterhalb der Navigation – zum Beispiel nicht entfernen, ohne dass es auch oben über der Nav verschwindet. Genau das würde ich aber gerne: das Logo nur oben links über der Navi haben, nicht unter der Navi.

Ich kann die Navileiste jetzt nicht orange und die zeile des Logos über der Navi weiß schalten.

Gebt gerne Bescheid, falls das mit dem Elementory-Library-Ansatz doch gehen sollte. Ansonsten versiche ich es jetzt mal mit Header & Footer Builder.

Nochmals vielen Dank an alle!

Moderator Bego Mario Garde
(@pixolin)

vor 2 Monaten, 2 Wochen

Ich kann das Logo im Zentrum der Seite – also unterhalb der Navigation – zum Beispiel nicht entfernen, ohne dass es auch oben über der Nav verschwindet.

Eigentlich sollte bei der beschriebenen Vorgehensweise der vorhandene Header ersetzt werden. Wieso der jetzt doppelt auftaucht, kann ich nicht sagen. Hast du einen Link zu einer Beispielseite?

Gebt gerne Bescheid, falls das mit dem Elementory-Library-Ansatz doch gehen sollte.

Das war die Library von OceanWP.

Ansonsten versiche ich es jetzt mal mit Header & Footer Builder.

Gute Alternative, wenn man Elementor nutzt.

Moderator Angelika Reisiger
(@la-geek)

vor 2 Monaten, 2 Wochen

Das Problem scheint behoben zu sein.

Ich setz den Thread dann auf gelöst (rechte Seitenleiste, Status), bitte denk nächstes Mal selbst daran (Begründung).

Über eine Rückmeldung inkl. Lösung freuen sich alle, Leser, Moderatoren und künftige Hilfesuchende mit einem ähnlichen/gleichen Problem

Thread-Starter tomjoad2023
(@tomjoad2023)

vor 2 Monaten, 2 Wochen

Bitte entschuldige, dass ich es noch nicht auf „gelöst“ gestellt habe. Ja, es ist gelöst!

Letztlich habe ich mich für den Header / Footer Builder entschieden: Damit konnte ich das Logo im Zentrum löschen, ohne, dass das Logo über der Navi verschwindet. Und ich konnte den Farbverlauf des Headers unabhänhig vom Logo darüber selbst bestimmen, da Navigation und Logo nun in verschiedenen Containern sind.

Was noch nicht gelöst ist: Die Navigations-Schrift krieg ich nicht vertikal zentriert – aber das wird sich auch noch irgendwie beheben lassen.

Vielen Dank an euch beiden!

Thomas
Moderator Angelika Reisiger
(@la-geek)

vor 2 Monaten, 2 Wochen
Danke für die Rückmeldung 🙂
Vertikale Ausrichtung, versuch es mal damit. Der Absatz hatte unten 20px Außenabstand (margin)
```
.elementor-element.elementor-element-58820ca.e-flex.e-con-boxed.e-con.e-parent .e-con-inner div.elementor-widget p {
    margin: 0;
}
```
Thread-Starter tomjoad2023
(@tomjoad2023)

vor 2 Monaten, 2 Wochen

Hm… ich arbeite bislang nur mit der grafischen Nutzeroberfläche, nicht auf der Programmierungsebene. Ich kann mich selbstverständlich auch mal mit der Programmierung beschäftigen. Aber vielleicht geht es ja auch so.

Unter LAYOUT ist bnei MARGIN überall 0 (wenn ich den Container der Navi-Leiste anklicke). Meintest du das?

Moderator Bego Mario Garde
(@pixolin)

vor 2 Monaten, 2 Wochen

In deinem Menü klebt der Text der Menüeinträge etwas weit oben. Den Abstand darunter habe ich hier mal mit lila eingerahmt: