[Support request] Mobile Interface issues

[Adarsha]

Hey.
Thanks for all the help so far.

In mobile, for header, when I choose Mobile header On in customizer, everything vanishes with a hamburger menu only. (no logo, borders or anything)
If I turn it off, then only header for mobile comes back. But it is very thick and not sure there is any negative margin which I can set to reduce for mobile only.

Have attached screenshots.

I am using a SVG logo. works well on desktop and tab.
Also removed retina logo (As it was suggested in another support ticket), but still issue persists.

[Adarsha]

I am also fine with keeping the mobile header off and using this way. But how can I reduce the header size to almost 60%? Would need to also reduce logo size, but reducing in layout also reduces desktop size.

Have attached a screenshot of how much header I need in mobile.
Thank you 🙂

[Ying]

Hi Adarsha,

The extra space is from the margin of the header widget, the content doesn’t show on mobile, but the margin is still there.
[removed per user’s request]

You can add this CSS to remove the margin on mobile:

.inside-header .main-navigation.mobile-menu-control-wrapper ~ .header-widget {
    margin-top: 0;
}

[Adarsha]

Can those screencasts be sent privately?

Further, why I am not able to use mobile menu specifically?

[Ying]

Can those screencasts be sent privately?

Unfortuanly not. But I can remove them after you viewed them.

Further, why I am not able to use mobile menu specifically?

You definitely can! But seems you have cache issue.

[Adarsha]

I have CF enterprise via Rocket.net
How can I solve this to use mobile menu?

Edit: Confirmed from rocket.net that there is no cache issue in logs.

Or is using mobile menu not really necessary?

Also when I scroll my pages on tab and mobile, a 2nd hamburger menu is opening suddenly. Not really sure what it is
I have attached the screenshot in private area.

[Adarsha]

Hope this message was not missed.

The major issue using desktop menu only for mobile is, I can’t reduce logo size only for mobile. Now the mobile header is still very large due to logo size I suppose and reducing size reduces in desktop aswell.

Please let me know how to proceed.

[David]

Hi there,

you can add this CSS to resize the logo on smaller screens:

@media(max-width: 768px) {
    .site-header .header-image {
        width: 170px;
    }
}

[Adarsha]

Also when I scroll my pages on tab and mobile, a 2nd hamburger menu is opening suddenly. Not really sure what it is
I have attached the screenshot in private area.

[David]

I do not see that.
Try clearing the browser caches – if it persists then connect to another network and open the page in a private/incognito browser.

[Adarsha]

Hey, I did more testing. It is coming on Safari browser only.
Both on my Iphone and Ipad.

Tested on Chrome, Brave browser on Iphone, ipad, Android and none of them have it.

So only on Safari. (Tried Incognito, different network)
How can I rectify it?

[David]

Make sure you DO NOT have the Sticky Navigation enabled in Customizer > Layout

[Adarsha]

Ah that was indeed on. Sorry about that. Now it works. Thanks a lot 🙂
I think i’m 99% ready with my website to launch (push staging to live which is on divi)

Couple of design issue’s I’m not able to make better.

1. The mobile menu is really bad. I did not do anything so far, as I can’t see much settings for it. Is there a video or something to make hamburger menu dropdown more better? Now it’s even difficult to click properly. (screenshots atttached)
I wish I could have designed menu using GB. But since I did it already in customizer, I don’t have much options there.

2. When I push it to live from staging website, what all I need to be careful off? I will literally be replacing whole website which is on divi with this. Website usually have live traffic

3. I have now built various blog sections (different pages) using Wp show posts. The design wise its bad and also titles look bad. But you people mentioned that GB feature for blog will be available in a week. So I’m really putting all my hope on it and push this temporarily. Is 1 week ETA?

[David]

1. in Customizer > Layout > Primary Navigation you need to increase the Menu Item Height – you can change it specifically for mobile by clicking the mobile icon beside the property.

2. If your host is managing the staging to live push then there should be no issues.

3. We aim to release the Alpha version of GB next week – a lot of users will no doubt use it on live sites immediately, but its a significant update so we will run a slow test release from alpha > beta > release candidate versions which depending on user testing and feedback can take several weeks before its released in its final stable version.

[Adarsha]

3. How can I get alpha version?

[Author]

Posts