Mobile Header Logo not showing after migration

  • After migrating my staging environment to our live-instance, the site-logo is not shown anymore for the mobile header. I have searched via google and tried out any suggestions to solve this I found, like:
    – disable any caching and optimization plugins
    – disable any other plugins but GP
    – re-upload logo
    – remove retina-logo
    – rebuild permalinks
    – changing logo in customizer, changing it in header-merge-element

    none of that made a difference. After comparing both sites in Chrome developer tools, I had some interesting findings:
    On the live-instance, the logo is actually loaded, but div.site-logo.mobile-header-logo.page-hero-mobile-logo has a size of 0x200, where on the staging-environment it’s 180×200.
    Live:
    Live-Instance
    Staging:
    Staging-Instance

    I provided code-snippets in the private information for reference.

    In case you need to have a “live-view” on both sites, please let me know. Staging-environment is up with working mobile header, for the live-instance I have currently mobile header turned off as a workaround to have a somehow functioning site. I can enable mobile-header for some time if needed.

  • Hi there,

    Please don’t add HTML code inside the Private Information section, as it will be rendered and can break the forum layout.

    You can simply provide the links to both the live and staging sites so we can compare the issue between them and investigate further.

  • Sorry, didn’t know this. I just posted the links to staging and live in the private information and also switched mobile header on on live. Please let me know as soon as you have checked the code, especially the live-site, so I can switch it back or solve the problem, as with mobile header on it is only half-usable.

  • On the live site, go to Customize > Layout > Primary Navigation, then set the Menu Item Height value to 200px in a mobile breakpoint, matching the configuration used on the staging site.

    Currently, the mobile navigation item height is set to only 20px, which causes the menu background image to be clipped and not render visibly.

  • Done that, the Logo is back, but now the hamburger-menu is not showing.

  • Hello,

    Apologies, there was probably some misunderstanding in the previous reply. Remove the 200px from Customize > Layout > Primary Navigation -> Mobile Menu Breakpoint (restore previous value). Instead click the mobile icon and set the 200px to the field I show you here:

    Menu item height value

  • I don’t have these options, see screenshot (sorry for the german localisation):
    screenshot

  • Just as additional information: WordPress is 6.9.4, GP Premium 2.5.5 and GenerateBlocks 2.2.1

  • OK, I just got it… I deactivated any GP modules I’m not using… seems Spacing is responsible for this one, after activating it, the options are there and the proper design is back.

  • Marking as resolved

  • Ok, good to know!

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.