Logo stretched and menu icon not showing in mobile

Hi @tracycoach I had a similar issue with the latest theme version (v. 3.5.8) and it looks like they changed the setup a bit. Previously there was a logo constructor that seems to have created a style reference for the logo:

.builder-item--logo .site-logo img {
  max-width: 120px;
}

This wasn’t generated on my site any longer, instead it looks like there is a variable defined:

.site-logo img {
  max-width: var(--maxwidth);
  display: block;
  margin: 0 auto;
}

In my child theme, I had some old code like this:

.site-logo img {
  max-height: 90px;
  max-width: 100%;
}

The max-width in my child theme overrode the CSS from the Neve parent theme, and caused the logo to have the wrong dimensions.

I’m not sure which version you are running and it looks like your image still gets the builder-item class:

.builder-item--logo .site-logo img {
  max-width: 175px;
}

For some reason, the height doesn’t seem to get defined properly. If I add height: auto; to that class above, your logo looks the right size.

Thanks for the reply, Karl! I’m just using the Customizer for this client site and don’t want to have to create a child theme, so hopefully your reply will help the developer see what’s happening. It only broke after their recent Customizer changes and hasn’t been fixed by rolling back to the old method. Thanks again!

Hi Tracy, if you add:

.builder-item--logo .site-logo img {
  height: auto;
}

under Appearance > Customize > Additional CSS, then that should fix the stretched height for the logo.

The menu also looks broken when I visit the site, but that’s a different issue..

Hi @tracycoach,

Thank you for using Neve, and I’m sorry to hear about the difficulties you encountered.

I can see some errors in the browser console when checking the website, some font files were not found on the server – https://vertis.d.pr/i/hF0d2t.

Because of these errors, I can see the header doesn’t look correct on the Desktop either(https://vertis.d.pr/i/HWriYr).

I recommend following the steps in this guide to find the conflict and replace the problematic plugin. In case there is no plugin conflict, you can get in touch with your hosting provider to help correct these errors. The header should work correctly after that.

Feel free to share how it goes after following the recommended steps.

Regards,
Stefan

Hi Stefan, thanks for your response. However, I don’t think the font awesome files not loading are related – I use the Google font Montserrat for the menu, and the logo is an image file?

Moreover, the website is in fact loading properly on multiple browsers – eg on my 13″ MBP, it still displays as normal on Safari and Firefox.

It also shows correctly on Brave on my client’s larger laptop, but the errored display (stretched logo, expanded menu) is showing for him on Safari on that laptop.

The errored display is showing for both of us on our mobile phones (Safari, Firefox, Brave).

So at least part of the problem is that it the logo is not resizing across various devices/screen sizes as it used to; did you see Karl (KS)’s comment above about him experiencing the same problem since the last Neve update? (Karl, I tried that code you suggested but it didn’t fix the stretched logo, nor the menu display issue, thanks anyway.)

I’m worried about losing customisations by starting to tinker around with de-activating plugins, if there’s been a recent change to the Neve theme that explains the issue?

Thanks,

Tracy

• This reply was modified 1 year, 6 months ago by Tracy.

Hi Tracy, I didn’t look at the menu, but adding height: auto; in the browser console as a test, does resize the logo correctly for me at least. Did you add the code as additional CSS in the customizer? Perhaps it still gets overridden by other CSS, you could try forcing it:

.builder-item--logo .site-logo img {
  height: auto !important;
}

Hi Stefan,

I took a risk and installed that troubleshooting plugin you suggested, and disabled plugins one by one. That fixed the issue, and it stayed fixed even when I re-enabled them, so I have no idea what was causing it – thank-you for the plugin suggestion!

I did also add a ‘Donate’ button to the header, on both desktop and mobile layouts, but it doesn’t display on the mobile home page, for some reason? It does display on all other pages. Is that a related issue?

(Karl, thanks again for your time – I did try adding that code, and it didn’t work, but appreciate the suggestion!)

Tracy

Hi @tracycoach!

Could you please provide us a screenshot from Customizer -> Header, similar to this one?

Thanks!

Hello @tracycoach,

It’s been a while since we have heard from you. We will now be closing this thread if the issue has already been resolved. Kindly open a new thread if you have other questions or concerns.