Header Not Displaying Correctly in Mobile

In addition, I have discovered (and cannot rectify), the following issue when viewing on a tablet. The menu opens but none of the items show unless selected.

Hi,

I looked at your site and the mobile version looks just like the picture you show in the editor. Have you tried deleting the cache?

As for the mobile menu, you need to edit the mobile version style manually because right now the text color is the same as the background. You can reference this video:

Thank you for your response, gowinda. I was able to find where a global setting was still in white for the menu text. That has been corrected.

As for the first issue, I am still having the same problem with the header not showing in mobile. It is correct in tablet, but not mobile. I have tried clearing the cache. I have also viewed in multiple browsers and see the same issue. I am definitely stymied.

• This reply was modified 7 months, 2 weeks ago by drag46.

Hi,

I have checked again and found the problem. The thing is the phone version still has the old theme style from bauhaus theme.

As you can see on the left side is the browser using mobile mode and on the right side is the one directly from a phone. The style loaded is from themes called bauhaus.

So you can try a few thing. try deleting the bauhaus themes if you still have it installed. Try downloading a plugin that can delete cache from your wordpress data. or you can try manually adding css so the height is correct.

as you can see the headers height is set on the right, you can overwrite it using css and add header {height: auto !important} using additional css

Great news! I was able to rectify the issue. I could not find the bauhaus theme installed anywhere and opted not to rely on an additional plug-in. The additional CSS worked! Thank you so much! There is, however, one remaining issue I cannot shake. As you’ll see be the following image, our logo is not showing correctly in the mobile header. I just cannot figure out why.

Hi,

for the image issue, you can add:

header .guten-column-wrapper .wp-block-image {
    max-height: none !important;
}

I tried placing that custom CSS in Appearance/Custome in both desktop and mobile themes. I also placed it in the advanced section of the site logo under global styles. Nothing changed in the partial appearance of the site logo on mobile for any browser I tried. This is really kicking my butt.

Hi,

Try adding it using custom HTML block. go to Appearance > Editor > Patterns > Header. and put the html code wherever you want in the header pattern.

<style>
.wp-block-image {
    max-height: none !important;
}
header .guten-column-wrapper .wp-block-image {
    max-height: none !important;
}
</style>

and add this code to the html block

• This reply was modified 7 months, 1 week ago by gowinda.
• This reply was modified 7 months, 1 week ago by gowinda.

I could not get that solution to work, either.

Hi, can you give me the header content code?

Or, you can try one last thing:

go to your header pattern and change the image block from wordpress image block to gutenverse image block. Then give the image a custom class, and then give that class the style. the problem I saw is that the image has a max-height of 44px.

Hi,
It’s been a while since we last heard from you, so we’ll be closing this thread. If you or anyone else encounters the same problem, please create a new thread so it’s easier for us to notice.

Regards,
Gutenverse Support

I have tried all of the suggestions given here. I have tried everything that I could find in the forums. I have tried everything I could find online, at large. I cannot solve this issue. The best that I can come up with now the entire logo is showing, but is squished into the 44px(?) high area on mobile. Please help.

Hi,

Yes, the issue remains the same—your header image is still restricted by a max-height of 44px.

try to apply this CSS code:

.guten-E5ZeJu .guten-column-gap-default .guten-3o6oCV .guten-column-wrapper .wp-block-image img, header img {
    max-height: none !important;
}

Also, i notice that you use <script> to the CSS code, please change that and use <style> instead

If that still doesn’t help, I see that you still use the WordPress image block and not the Gutenverse image block, please try to change the image block in your header.

Finally!!! Yesssss!!! Thank you so much. I’m sure the additional CSS helped, but I completely missed using <Script> instead of <Style>! Thank you! It looks great now!

You’re welcome!

We would really appreciate it if you could leave a 5-star review for our plugins:

• Gutenverse Plugin Reviews
• Gutenverse Form Reviews

Thanks in advance!

Best regards,
Gutenverse Support