Support » Allgemeine Fragen » Sticky Header Oceanwp

  • Gelöst melojezzed

    (@melojezzed)


    Hi zusammen,

    ich habe genau wie in diesem Thema Elementor und oceanwp als Theme:
    https://de.wordpress.org/support/topic/header-fixieren-oceanwp/

    In dieser Fragerunde hat Angelika einen CSS-Code angeboten, um den Header Sticky zu gestalten. Diesen habe ich übernommen, jedoch war nichts Sticky und die Überschrift hat sich nach rechts verschoben.Ich habe dann auch Envato Element deaktiviert, hat aber nichts gebracht. Somit biete ich hier noch einen Bericht, vielleicht kann mir jemand helfen?

    (Ich habe zwar Elementor Pro installiert, jedoch brauche ich in der Website, wie sie nun zu sehen ist, eigentlich keine Pro Version. Deshalb möchte ich versuchen alles weitere ohne die Pro-Vorteile zu machen, um sie dann wieder zu deaktivieren irgendwann).

    
    ### wp-core ###
    
    version: 6.1.1
    site_language: de_DE
    user_language: de_DE
    timezone: +00:00
    permalink: /%postname%/
    https_status: true
    multisite: false
    user_registration: 0
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 1
    dotorg_communication: true
    
    ### wp-paths-sizes ###
    
    wordpress_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_02/app
    wordpress_size: loading...
    uploads_path: /mnt/web019/a1/28/511055428/htdocs/STRATO-apps/wordpress_02/app/wp-content/uploads
    uploads_size: loading...
    themes_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_02/app/wp-content/themes
    themes_size: loading...
    plugins_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_02/app/wp-content/plugins
    plugins_size: loading...
    database_size: loading...
    total_size: loading...
    
    ### wp-active-theme ###
    
    name: OceanWP (oceanwp)
    version: 3.3.2 (latest version: 3.4.1)
    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: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_02/app/wp-content/themes/oceanwp
    
    ### wp-themes-inactive (6) ###
    
    Radiate: version: 1.4.0, author: ThemeGrill
    Twenty Nineteen: version: 2.4, author: WordPress-Team
    Twenty Twenty: version: 2.1, author: WordPress-Team
    Twenty Twenty-One: version: 1.7, author: WordPress-Team
    Twenty Twenty-Three: version: 1.0, author: WordPress-Team
    Twenty Twenty-Two: version: 1.3, author: WordPress-Team
    
    ### wp-mu-plugins (3) ###
    
    Elementor Safe Mode: version: 1.0.0, author: Elementor.com
    installatron_hide_status_test.php: author: (undefined), version: (undefined)
    WordPressSecureMode.php: author: (undefined), version: (undefined)
    
    ### wp-plugins-active (16) ###
    
    Advanced Editor Tools (previously TinyMCE Advanced): version: 5.6.0, author: Automattic
    Antispam Bee: version: 2.11.1, author: pluginkollektiv
    Broken Link Checker: version: 1.11.21, author: WPMU DEV
    Disable & Remove Google Fonts: version: 1.5.2, author: Fonts Plugin
    Elementor: version: 3.10.0, author: Elementor.com (latest version: 3.10.1)
    Elementor Pro: version: 3.10.1, author: Elementor.com (latest version: 3.10.2)
    Limit Login Attempts Reloaded: version: 2.25.10, author: Limit Login Attempts Reloaded (latest version: 2.25.11)
    Newsletter: version: 7.5.9, author: Stefano Lissa & The Newsletter Team
    Ocean Extra: version: 2.1.1, author: OceanWP
    Real Cookie Banner (Free): version: 3.4.12, author: devowl.io
    Statify: version: 1.8.4, author: pluginkollektiv
    Strato Assistant: version: 5.7.0, author: Strato
    The Events Calendar: version: 6.0.6.2, author: The Events Calendar
    ThemeGrill Demo Importer: version: 1.8.9, author: ThemeGrill
    UpdraftPlus - Backup/Restore: version: 1.22.24, author: UpdraftPlus.Com, DavidAnderson
    Yoast Duplicate Post: version: 4.5, author: Enrico Battocchi & Team Yoast
    
    ### wp-plugins-inactive (1) ###
    
    Envato Elements: version: 2.0.11, author: Envato
    
    ### wp-media ###
    
    image_editor: WP_Image_Editor_Imagick
    imagick_module_version: 1692
    imagemagick_version: ImageMagick 6.9.12-60 Q16 x86_64 17403 https://legacy.imagemagick.org
    imagick_version: 3.5.1
    file_uploads: File uploads is turned off
    post_max_size: 128M
    upload_max_filesize: 128M
    max_effective_size: 128 MB
    max_file_uploads: 20
    imagick_limits: 
    	imagick::RESOURCETYPE_AREA: 4 GB
    	imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
    	imagick::RESOURCETYPE_FILE: 192
    	imagick::RESOURCETYPE_MAP: 4 GB
    	imagick::RESOURCETYPE_MEMORY: 2 GB
    	imagick::RESOURCETYPE_THREAD: 1
    imagemagick_file_formats: 3FR, 3G2, 3GP, A, AAI, AI, APNG, ART, ARW, AVI, AVS, B, BGR, BGRA, BGRO, BMP, BMP2, BMP3, BRF, C, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, 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, G, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, H, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, JNG, JNX, JPE, JPEG, JPG, JPS, JSON, K, K25, KDC, LABEL, M, 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, O, 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, POCKETMOD, PPM, PS, PS2, PS3, PSB, PSD, PTIF, PWP, R, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCREENSHOT, 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, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMV, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, Y, YCbCr, YCbCrA, YUV
    gd_version: bundled (2.1.0 compatible)
    gd_formats: GIF, JPEG, PNG, WebP, BMP
    ghostscript_version: not available
    
    ### wp-server ###
    
    server_architecture: Linux localhost 3.10.0-1160.71.1.el7.x86_64 #1 SMP Linux localhost 3.10.0-1160.71.1.el7.x86_64 #1 SMP Linux localhost 3.10.0-1160.71.1.el7.x86_64 #1 SMP
    httpd_software: Apache/2.4.54 (Unix)
    php_version: 8.0.27 64bit
    php_sapi: cgi-fcgi
    max_input_variables: 4000
    time_limit: 240
    memory_limit: 512M
    max_input_time: 60
    upload_max_filesize: 128M
    php_post_max_size: 128M
    curl_version: 7.86.0 OpenSSL/1.1.1q
    suhosin: false
    imagick_availability: true
    pretty_permalinks: true
    htaccess_extra_rules: false
    
    ### wp-database ###
    
    extension: mysqli
    server_version: 5.7.38-log
    client_version: mysqlnd 8.0.27
    max_allowed_packet: 67108864
    max_connections: 3000
    
    ### wp-constants ###
    
    WP_HOME: undefined
    WP_SITEURL: undefined
    WP_CONTENT_DIR: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_02/app/wp-content
    WP_PLUGIN_DIR: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_02/app/wp-content/plugins
    WP_MEMORY_LIMIT: 40M
    WP_MAX_MEMORY_LIMIT: 512M
    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_ENVIRONMENT_TYPE: Nicht definiert
    DB_CHARSET: utf8
    DB_COLLATE: undefined
    
    ### wp-filesystem ###
    
    wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    mu-plugins: writable
    
    

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

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • Hallo,

    Diesen habe ich übernommen, jedoch war nichts Sticky und die Überschrift hat sich nach rechts verschoben.

    Und die CSS-Regeln hast du auch tatsächlich da übernommen, wie das Angelika in ihrer Antwort beschrieben hat?
    Ich habe das gerade mal kurz in der developer console getestet und das sollte funktionieren. Bitte exakt so verwenden, wie das Angelika beschrieben hat.

    An dieser Stelle möchte ich aber noch darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu, auch wenn wir je nach Zeit mal entsprechende Tipps geben.
    Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier. Hier noch ein Link zu einem Hilfe- und Austausch-Forum für (u. a.) CSS -> Forum.

    Viele Grüße
    Hans-Gerd

    Thread-Starter melojezzed

    (@melojezzed)

    Hallo Hans-Gerd,

    vielen Dank für Deine Antwort. Ich habe es noch einmal überprüft (also darauf geachtet, dass ich alles ganz unten im Custom CSS eintrage und trotzdem funktioniert es nicht. Also soll ich dann hier die Diskussion beenden und im CSS-Forum fragen?

    Vielen Dank und Grüße

    Hallo,
    zumindest sehe ich die Änderungen von dir nicht in der developer console (Aufruf mit F12 in Chrome).
    Wenn du die von Angelika genannten Anpassungen in der developer console vornimmst (so habe ich die Lösung von Angelika getestet), dann solltest du auch sehen, dass das funktioniert.

    Also soll ich dann hier die Diskussion beenden und im CSS-Forum fragen?

    Teste das doch noch mal und ansonsten müsstest du dich in der Tat mit CSS auseinandersetzen.

    Viele Grüße
    Hans-Gerd

    @melojezzed

    ich kann den Code nicht finden. Hast du ihn wieder gelöscht? Für solche Rückmeldungen „hab ich eingefügt, geht nicht“ ist es immer hilfreich, den Code eingefügt zu lassen, damit das hier jemand gegenprüfen kann.

    Für deine Website würde der folgende Code funktionieren

       
    #site-header {
      position: fixed !important;
    }

    Allerdings, wenn du weiter herunter scrollst, dann wird es unschön, wenn das Menü über den Inhalten liegt.

    Etwas anderes: Du hast zwar das Plugin „Disable & Remove Google Fonts“ installiert, aber es funktioniert nicht oder nicht komplett, denn es werden immer noch Google Fonts direkt von Google geladen. Weitere Infos und Hilfe findest du unter https://dsgvo-und-fonts.de

    Thread-Starter melojezzed

    (@melojezzed)

    Hallo Angelika,

    vielen, vielen Dank! Jetzt klappt es. Stimmt, das sieht komisch aus, da müsste der Header dann beim Scrollen eine Färbung bekommen. Schon wieder das nächste Problem :-D.

    Und auch vielen Dank für den Google Font Hinweis! Ich habe die Schriftarten eigentlich alle separat hochgeladen und mit H1 bis H6 ausgewählt, dabei die Werkseinstellung in Elementor gelassen. Zusätzlich vorsichtshalber noch das Plugin installiert und TROTZDEM werden Schriften noch geladen…

    Da werde ich dann nochmal alles überprüfen müssen.

    Vielen Dank für Deine Mühe!

    Thread-Starter melojezzed

    (@melojezzed)

    Oder wüsstest du ein CSS-Code den ich noch eingeben kann, dass sich der Header gleichzeitig dezent einfärbt? Den Farbwert kann ich ja dann ausprobieren.

    (Übrigens bin ich gerade am HTML und CSS lernen)

    • Diese Antwort wurde geändert vor 2 Wochen, 1 Tag von melojezzed.

    Hallo,
    z. B. so:

    div#site-header-inner {
        background-color: rgb(255 255 255 / 55%);
    }

    Ideal ist das allerdings alles nicht. Aber ein Ansatz zum selber lernen 😉

    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    Soviel, liebe Leserinnen und Leser, zu unserer heutigen Nachhilfestunde in CSS. 😛

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)