Tagged: header, logo, verkleinert
-
AuthorPosts
-
July 11, 2023 at 4:05 pm #1413052
Hallo,
ich habe folgendes Problem:
Ich habe einen fixierten Header, welcher sich beim Scrollen verkleinert. Dort ist es so das ab und zu nach dem wieder hochscrollen das Logo statt 220px maximale Höhe nurnoch 110px maximale Höhe hat. Dadurch ist es natürlich zu klein. Ich kann leider nicht die genauen Umstände sagen, wann genau es auftritt. Manchmal passiert es und manchmal nicht.
Bilder und Link zu Entwicklungsseite sind im Privat Content.
Ich habe das Code-Snippet für ein Widget im header in Verwendung, falls das relevant ist.Hier mein Code wechen ich für den Header nutze:
/************************************ Menu Burger Hintergrund **********************************/ .html_burger_menu_active #top #wrap_all #header .av-burger-menu-main > a { background:url('/wp-content/uploads/2023/07/Gruppe-9.png'); background-repeat: no-repeat; background-size: cover; padding: 20px 18px; } /* Menu verkleinert scrolled */ .header-scrolled .av-hamburger-box { height:6px; width:28px; } .header-scrolled .av-hamburger-inner::before { top: -8px; } .header-scrolled .av-hamburger-inner::after { bottom: -8px; } .header-scrolled .av-burger-menu-main > a { background:url('/wp-content/uploads/2023/07/Gruppe-9.png'); background-repeat: no-repeat; background-size: cover; padding: 13px 14px !important; } /************************************ Logo scrolled geändert **********************************/ .header-scrolled .logo img { opacity: 0; } .header-scrolled .logo a { background-image: url(/wp-content/uploads/2023/07/Forellenhof-Signet-2023_.png); background-size: contain; background-repeat: no-repeat; } /************************************ Widget left, Logo center, Menu right **********************************/ .responsive #top #header #header_main .inner-container .logo { left:-70px; } /*-------------------------------- » Initiate Flexbox --------------------------------*/ /* Header */ .responsive #top #header, /* Top bar */ .responsive #top #header #header_meta, /* Search icon */ .responsive #top #header #menu-item-search a, /* Cart icon */ .responsive #top #header a.cart_dropdown_link, /* Social icon */ .responsive #top #header #header_main nav .social_bookmarks, /* Logo */ .responsive #top #header #header_main .inner-container .logo, /* Main menu, cart and social icons */ .responsive #top #header #header_main .inner-container .main_menu, /* Widgets */ .responsive #top #header #header_main .inner-container .widget, /* Header inner container */ #top #header #header_main .container.av-logo-container .inner-container { display: flex; position: relative; } /*-------------------------------- » Topbar --------------------------------*/ /* Top bar */ .responsive #top #header #header_meta { flex-basis: 100%; } /*-------------------------------- » Header --------------------------------*/ /* Height outer container */ #top #header #header_main .container.av-logo-container { /* Do not change height here */ /* Auto height: Header takes the height of the contents */ height: inherit; line-height: inherit; } /* Header inner container */ #top #header #header_main .container.av-logo-container .inner-container { /* Define header height here */ height: auto; position: relative !important; flex-wrap: wrap; /* Define header padding */ padding: 13px; justify-content: space-between; } /* Wrappers --------------------------------*/ /* Main header ( logo, menu, widgets ) and topbar */ .responsive #top #header { flex-wrap: wrap; } /* Logo, Menu, Social Icons and Widgets. */ .responsive #top #header #header_main { flex-basis: 100%; } /* Transparent header --------------------------------*/ .responsive.html_header_transparency #top #wrap_all #header { position: absolute; } @media only screen and (max-width: 767px) { .responsive.html_header_transparency #top #wrap_all #main { /* Define padding value for transparent header in mobile */ /*padding-top: 315px !important; */ } } /* Fixed header --------------------------------*/ .html_header_sticky.html_mobile_menu_tablet #top #wrap_all #header, .html_header_sticky.html_header_transparency #top #wrap_all #header, .html_header_sticky #top #wrap_all #header { position: fixed; } .html_header_sticky #top #header_main .container, .html_header_sticky #top .main_menu ul:first-child>li a { height: inherit !important; line-height: inherit !important; } /* Main content padding value should be same as the fixed header height. */ .html_header_sticky:not(.html_header_transparency) #top #wrap_all #main, .html_header_sticky #top #wrap_all #main { /* Define padding only if sticky header is active */ padding-top: 220px ; } @media only screen and (max-width: 767px) { .html_header_sticky #top #wrap_all #main { /* Define padding value for sticky header on mobile */ /*padding-top: 315px !important; */ } } /*-------------------------------- » Logo --------------------------------*/ .responsive #top #header #header_main .inner-container .logo { order: 2; flex-basis: auto; /*width: auto;*/ /* Define scalable min width of the logo on small screens */ min-width: 100px; /* Define scalable max width of the logo on big screens */ /* Logo width: (auto | 100% | px ); Set auto to display the uploaded image size */ max-width: 220px; z-index: 9; } /* Logo image size */ .responsive #top #header .logo, .responsive #top #header .logo a, .responsive #top #header .logo img { width: auto; /* Height specification is not required. It is proportional to the max width of the logo */ height: auto; align-items: center; align-self: center; justify-content: center; } /* Vertically center transparency logo */ .responsive #top #header .logo span img { position: absolute; top: 50%; transform: translateY(-50%); } /*-------------------------------- » Menu --------------------------------*/ /* Menu outer container: Menu with siblings cart and social icons */ .responsive #top #header #header_main .inner-container .main_menu { order: 3; /* Define menu width */ flex-basis: auto; align-items: center; align-self: center; height: inherit !important; } /* Navigation */ #header .av-main-nav { display: flex; flex-wrap: nowrap; } /* Activate burger menu */ @media only screen and (max-width: 1000px) { #top #header .av-main-nav>li.menu-item { display: none!important; } #top #header .av-burger-menu-main { cursor: pointer; display: block!important; } } @media only screen and (max-width: 767px) { /* Mobile menu position fix */ .responsive #top .av-logo-container .avia-menu { display: flex!important; align-items: center; } } /* Mega menu submenu position fix */ .responsive #top #header .avia_mega_div { /* Define megamenu submenu top value */ /* top: 300px; position: fixed; left: 50%; transform: translateX(-50%);*/ } /*-------------------------------- » Widget --------------------------------*/ .responsive #top #header #header_main .inner-container .widget { order: 1; flex-basis: auto; padding: 0; clear: none!important; justify-content: center; align-self: center; align-items: center; z-index: 1; } .responsive #top #header #header_main .inner-container .widget>div { width: 100%; line-height: 14px; padding: 0 10px; background: gold; } /*-------------------------------- » Social icons --------------------------------*/ /* Flex support and position fix */ .responsive #top #header #header_main nav .social_bookmarks { top: auto; margin-top: 0; align-items: center; } /* Inherit height for flex alignment */ .responsive #top .av-logo-container .social_bookmarks li { height: inherit; } /*-------------------------------- * Cart position fix --------------------------------*/ #top #header #header_main #menu-item-shop a.cart_dropdown_link { height: auto; } @media only screen and (max-width: 767px) { .responsive #top #menu-item-shop.cart_dropdown { display: flex; align-items: center; } .cart_dropdown .dropdown_widget .avia-arrow { display: none; } }
Vielen Dank für die Hilfe
und viele GrüßeMandy
July 12, 2023 at 7:48 am #1413099Hey ConDevWa,
Thank you for the inquiry.
We can’t seem to reproduce the issue on Chrome. Which browser are you using? Please try to toggle or temporarily disable the Enfold > Performance > File Compression settings and see if it improves.
Best regards,
IsmaelJuly 13, 2023 at 8:31 am #1413196Hi Ismael,
im using Firefox.
File compression was already disabled. I can’t reproduce the error myself, it just appears sometimes. I have not yet been able to find a reason why.Best regards
MandyJuly 14, 2023 at 8:47 am #1413285Hi,
Thank you for the update.
Unfortunately, it would be difficult for us to provide a solution if we cannot reproduce the issue. If you encounter the issue again, please provide a screenshot or a short clip. You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:
1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.
Best regards,
IsmaelAugust 22, 2023 at 10:08 am #1416839This reply has been marked as private.August 25, 2023 at 4:26 am #1417123Hi,
Thank you for the short clip.
The issue seems to occur only when you scroll down without waiting for the site to finish loading. Improving the site’s loading speed could potentially resolve this issue. Please refer to the links below for more info on how to optimize the site’s loading speed.
// https://gtmetrix.com/wordpress-optimization-guide.html
// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslowBest regards,
IsmaelSeptember 29, 2023 at 10:21 am #1420875Hello Ismael,
I have now been able to reproduce the problem. It occurs when you have scrolled down on a page and then refresh/reload the page. If you scroll up again, the logo is reduced in size.
Best regards
MandyOctober 2, 2023 at 8:08 am #1421072Hi,
Thank you for following up.
Please add this script in the functions.php file to force the logo to resize on scroll.
function av_custom_inline_script() { wp_add_inline_script( 'jquery', " (function($) { // resize logo on scroll $(window).on('scroll', function() { if ($(this).scrollTop() < 30) { $(this).trigger('resize debouncedresize'); } }); })(jQuery); " ); } add_action( 'wp_enqueue_scripts', 'av_custom_inline_script' );
Best regards,
IsmaelOctober 4, 2023 at 8:36 am #1421351Hi,
unfortunately this did not work. I tried it once in the child theme and once in the normal Enfold theme.
Best regards
MandyOctober 5, 2023 at 7:27 am #1421460Hi,
Did you remove or purge the cache? Please make sure to purge the cache and perform a hard refresh before testing the page. If the issue persists, please provide the details of an admin account in the private field so that we can test the modification.
Thank you for your patience.
Best regards,
IsmaelOctober 11, 2023 at 10:36 am #1422102Hi,
I have cleared the cache of the page and also my browser cache. Unfortunately the problem is still there.
Best regards
MandyOctober 11, 2023 at 11:48 am #1422108Hi,
We edited the functions.php file and modified the code a bit. The script seems to be working as expected. Please make sure to purge the cache and do a hard refresh before checking the page.
Thank you for your patience.
Best regards,
IsmaelOctober 12, 2023 at 1:13 pm #1422230Hi Ismael,
many many thanks. It works perfectly!
Best regards
MandyOctober 13, 2023 at 4:59 am #1422325 -
AuthorPosts
- The topic ‘Verkleinerter Header passt nach hochscrollen die Logogröße nicht richtig an’ is closed to new replies.