Header Button Cutoff On Mobile

Hello,

Our header button is cutoff on mobile on the right side. How can we correct this?

Thank you!

Hello @addabble,

Thanks for reaching out. :slight_smile:

Please inspect the Bar and under Flex Layout select Wrap Children.

Thanks.

That didn’t work, what else can I try?

Also, how do prevent my logo from floating underneath the header? I’ve testing different padding and margin settings, yet nothing completely corrects it.

Hi @addabble,

To assist you better with this issue, please provide us your wordpress admin login in Secure Note. This is so we can check your header settings.

Hello @addabble,

Have you fix the issue already? I have check your site and I could not replicate the issue.
This is what I am seeing:

By the way, Pro 2.5.5 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/). Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

I performed the update.
In the builder, the mobile view shows up accurately, but on my phone it still looks like this:

Hello @addabble,

If this happens only in your phone, you are experiencing just a caching issue. Please clear your mobile phone’s browser cache or use private browsing mode. If you have Chrome in your phone, use incognito mode in testing your site.

Hope this helps. Please let us know how it goes.

Yes, I considered that, so prior to my last reply, I tested it in incognito mode on my phone and the issue is still present. So how can I correct it?

Hello @addabble,

I have checked your site in my phone and I am seeing this:

The contact us button is cut off because there aren’t any space left to display the whole items. I would highly recommend that in smaller screen, the log image should be reduce to a smaller size. To do that, please click your logo image, find the “Customize” tab and insert this inline element css:

@media(max-width: 480px){
    .$el img {
        max-width: 75px;
    }
}

Anyways, I went ahead and edited your header to save us time.

Please check it now.

Thank you.

You’re welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.