Header fixieren OceanWP
-
Guten Abend,
ich nutze das Forum erstmalig und hoffe, alles richtig zu machen.
Meine Frage:
Ich möchte den Header meiner Seite fixieren, damit er beim Runterscrollen oben nicht verschwindet.
Mein verwendetes Theme ist OceanWP, Plugins: Ocean Extra und Elementor.
Gibt es ein kostenloses und anwenderfreundliches Plugin dafür?
Danke für eine Antwort.
EvaDie Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
-
Hallo @esg52
trag das Folgende im Backend unter Design -> Customizer -> Zusätliches CSS ganz ans Ende ein:
@media screen and (min-width: 600px) { nav#site-navigation { float: right; } #site-navigation-wrap { width: -webkit-calc(100% - 70px); width: -moz-calc(100% - 70px); width: calc(100% - 70px); } #site-logo { width: 70px; } #site-header { position: fixed; } }
Liebe Angelika,
herzlichen Dank, es hat auf Anhieb so funktioniert!!Hallo Angelika,
kannst Du das für einen kompletten WordPress-Neuling ein klein bißchen klären:
Hab die gleiche Konstellation wie Eva (OceanWP + Ocean Extra + Elementor).
Finde aber unter dem Customizer nur die Auswahl „Custom CSS/JS“ und dort ist bisher alles leer, so daß ich kein „Ende“ habe, an das ich anfügen könnte…
Was versteh ich da nicht? (ist „Backend“ irgendwo anders?)
Wär schön, wenn Du mir auf die Sprünge helfen könntest.
Danke schon mal!
HelmutHallo Hans-Gerd,
was mich irritiert ist:
Unter Design> Customizer> … da gibt es bei mir keinen Punkt „zusätzliches“ CSS, sondern nur „Custom CSS/JS“ (leider kann ich hier in die Antwort keinen screenshot/ Bild einfügen).
Wenn ich nun dort im leeren Custom CSS/JS die obigen Regeln reinkopiere, dann ändert sich zwar die Größe des Headers, er wird aber nicht fixiert.
Und wenn ich nur die wohl entscheidende Passage
„#site-header {position: fixed;}“
reinkopiere, ändert sich gar nichts.Wo ist da der Haken?
Grüße
HelmutHallo,
wenn du Ocean Extra installiert hast, dann heißt der Punkt tatsächlich „Custom CSS/JS“.
Aber: wenn du den Code von Angelika so wie ich das im Screenshot gezeigt habe, in das Fenster „Custom CSS/JS“ kopierst, dann wird der Header bei mir in einer Testinstanz wie gewünscht fixiert.
Steht da denn schon was anderes drin?
Viele Grüße
Hans-Gerd- Diese Antwort wurde geändert vor 3 Jahren, 1 Monat von Hans-Gerd Gerhards.
Hmmm – gibts nicht:
Jetzt hab ich vor ein paar Minuten auf eine Meldung hin bei den Themes „Ocean WP“ aktualisiert und tatsächlich steht jetzt in dem Custom CSS/JS ein Text drin, der zuvor aber nicht da war, da herrschte vollkommene Leere (?).
Der Text da drin lautet:.envato-block__preview{ overflow: visible; } /* Border Radius */ .envato-kit-139-accordion .elementor-widget-container{ border-radius: 10px !important; } .envato-kit-139-map iframe, .envato-kit-139-slider .slick-slide, .envato-kit-139-flipbox .elementor-flip-box div{ border-radius: 10px !important; } /** End Block Kit CSS: 142-3-a175df65179b9ef6a5ca9f1b2c0202b9 **/
Bin zugegebenermaße noch mehr verwirrt 🙁 – (außer dass diese Eintragungen eher nicht direkt mit dem Header zusammenhängen).
Allerdings: auch wenn ich jetzt hier die Einfügung wie von Angelika beschrieben vornehme, ändert sich nichts (außer dass der Header seine Größe etwas verändert).
Grüße
HelmutHallo,
hast du denn irgendein Cache-Plugin aktiviert? – Das Plugin sollte auf jeden Fall bei solchen Entwicklungen erst mal deaktiviert werden.Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.
Und den Code von Angelika hast du hinter dem vorhandenen Code eingefügt?
Viele Grüße
Hans-Gerd- Diese Antwort wurde geändert vor 3 Jahren, 1 Monat von Hans-Gerd Gerhards.
Ja, den Code hab ich am Ende, hinter allem andern eingefügt.
Hier folgt nun der Bericht aus der Zwischenablage (ich versteh ganz überwiegend „Bahnhof“)
### wp-core ### version: 5.8.2 site_language: de_DE user_language: de_DE timezone: Europe/Berlin permalink: /%postname%/ https_status: true multisite: false user_registration: 0 blog_public: 0 default_comment_status: open environment_type: production user_count: 1 dotorg_communication: true ### wp-paths-sizes ### wordpress_path: /home/www/doc/34485/feuerundwind.de/www/wordpress wordpress_size: 47,45 MB (49755724 bytes) uploads_path: /home/www/doc/34485/feuerundwind.de/www/wordpress/wp-content/uploads uploads_size: 8,93 MB (9366676 bytes) themes_path: /home/www/doc/34485/feuerundwind.de/www/wordpress/wp-content/themes themes_size: 26,85 MB (28149149 bytes) plugins_path: /home/www/doc/34485/feuerundwind.de/www/wordpress/wp-content/plugins plugins_size: 47,88 MB (50204894 bytes) database_size: 13,05 MB (13680640 bytes) total_size: 144,15 MB (151157083 bytes) ### wp-active-theme ### name: OceanWP (oceanwp) version: 3.1.1 author: Nick author_website: https://oceanwp.org/about-me/ 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: /home/www/doc/34485/feuerundwind.de/www/wordpress/wp-content/themes/oceanwp auto_update: Deaktiviert ### wp-themes-inactive (3) ### Twenty Nineteen: version: 2.1, author: WordPress-Team, Automatische Aktualisierungen deaktiviert Twenty Twenty: version: 1.8, author: WordPress-Team, Automatische Aktualisierungen deaktiviert Twenty Twenty-One: version: 1.4, author: WordPress-Team, Automatische Aktualisierungen deaktiviert ### wp-plugins-active (4) ### Elementor: version: 3.4.8, author: Elementor.com, Automatische Aktualisierungen aktiviert Envato Elements: version: 2.0.11, author: Envato, Automatische Aktualisierungen aktiviert Ocean Extra: version: 1.9.0, author: OceanWP, Automatische Aktualisierungen aktiviert Yoast SEO: version: 17.6, author: Team Yoast, Automatische Aktualisierungen aktiviert ### wp-media ### image_editor: WP_Image_Editor_Imagick imagick_module_version: 1687 imagemagick_version: ImageMagick 6.9.7-4 Q16 x86_64 20170114 http://www.imagemagick.org imagick_version: 3.4.4 file_uploads: File uploads is turned off post_max_size: 32M upload_max_filesize: 32M max_effective_size: 32 MB max_file_uploads: 20 imagick_limits: imagick::RESOURCETYPE_AREA: 122 MB imagick::RESOURCETYPE_DISK: 1073741824 imagick::RESOURCETYPE_FILE: 49152 imagick::RESOURCETYPE_MAP: 512 MB imagick::RESOURCETYPE_MEMORY: 256 MB imagick::RESOURCETYPE_THREAD: 4 imagemagick_file_formats: 3FR, 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, DNG, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GROUP4, H, HALD, HDR, 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, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, 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, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WMV, 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 ghostscript_version: 9.26 ### wp-server ### server_architecture: Linux 4.19.67-xen-64bit x86_64 httpd_software: Apache php_version: 7.4.25 64bit php_sapi: cgi-fcgi 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.52.1 OpenSSL/1.0.2u suhosin: false imagick_availability: true pretty_permalinks: true htaccess_extra_rules: false ### wp-database ### extension: mysqli server_version: 10.3.32-MariaDB-1:10.3.32+maria~stretch client_version: mysqlnd 7.4.25 ### wp-constants ### WP_HOME: undefined WP_SITEURL: undefined WP_CONTENT_DIR: /home/www/doc/34485/feuerundwind.de/www/wordpress/wp-content WP_PLUGIN_DIR: /home/www/doc/34485/feuerundwind.de/www/wordpress/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: false CONCATENATE_SCRIPTS: undefined COMPRESS_SCRIPTS: undefined COMPRESS_CSS: undefined WP_LOCAL_DEV: undefined DB_CHARSET: utf8mb4 DB_COLLATE: undefined ### wp-filesystem ### wordpress: writable wp-content: writable uploads: writable plugins: writable themes: writable
Ehrlich gesagt fällt mir dazu nicht mehr viel ein.
Entweder machst du beim Einfügen etwas falsch (bei mir klappt es damit ohne Probleme) oder es liegt an dem Plugin „Envato Elements“. Du könntest das Plugin nach einer Sicherung ggfs. mal deaktivieren.OK – vielen Dank für die Mühe und für das das mit-Überlegen 🙂
Viele Grüße
HelmutHallo,
ich habe das oben genannte eingefügt und leider wird bei mir nur das Logo und das transparente Menü bewegt.. ohne den Hintergrund. Was mache ich falsch?
Vielen Dank
@ina199429
Moderatorenhinweis: Bitte immer ein neues Thema beginnen und nicht an ein sogar gelöstes Thema anhängen, siehe FAQ und bitte dann auch den Link zur Seite eintragen.zum Moderatorenhinweis:
Das Thema ist keineswegs gelöst, es ruht allenfalls. Denn nach wie vor bringt die Einfügung des Codes im Backend eben nicht die erwünschte Fixierung des Headers. Da mir dies nicht so wichtig erscheint, hab ich den Versuch schlicht aufgegeben.
Gelöst ist der Thread damit natürlich nicht und die Frage von ina199429 scheint nicht ganz falsch platziert zu sein.
Nix für ungut
Helmut@feuerundwind
schau doch mal bitte in die FAQ:
„Vor dem Stellen der Frage: Suchen
https://de.wordpress.org/support/search/
Aber Achtung: für neue Fragen immer einen neuen Thread eröffnen und nicht irgendwo ranhängen!“
Die Bitte war übrigens an @ina199429 gerichtet und nicht an dich.
Warum der thread als gelöst markiert ist, kann ich dir nicht sagen.
Nix für ungut
Hans-Gerd
- Das Thema „Header fixieren OceanWP“ ist für neue Antworten geschlossen.