[Support request] MOBILE DEVICE MENU BAR COVERS UP HEADER

[Dragana]

Hi team,
I am having difficulty with the mobile version header and menu.
I have custom made a header with Elementor and hooked above content. Ok on the desktop version but off on tablet and mobile.
First I adjusted the header to fit the tablet and mobile via CUSTOMISE and saved. When I went back to take a look through the WP admin it was not the way I saved it.
The tablet version text is cut off and mobile version the text cannot be seen as it is all the way to the right and the MENU was under the header.
But when I actually see this on my mobile it looks completely different (I have enabled all the mobile devices). Here the header does show correctly with the text centred but the MENU is on top and covers the header text.

So the questions are:
1.Why does it show differently on the acutal mobile than the themes version of mobile example? It’s a
waste of time tweaking. I don’t have a tablet so I don’t know how it actually looks.

2.Can the menu on mobile be on the left side and how to change it (as long as it does not affect the
desktop version)?

I hope you can help.

[Leo]

Hi there,

Can you link me to the site? Thanks!

[Dragana]

Hi
http://www.spaintravel.blog

[Leo]

1. Have you checked with Elementor on this one? GP’s contents are displayed correctly and can’t actually change how the Elementor’s contents are displayed. The preview function in customizer is actually from WordPress and not the theme itself.

That header can also be accomplished without Elementor pretty easily which should make everything a lot simpler.

2. Are you wanting the mobile toggle to be on the left? If so try this CSS:

button.menu-toggle {
    text-align: left;
}

[Dragana]

Thanks I tried this but still looks messy.
I will contact Elementor again on this (they told me to check with you…)
Thanks for your help

[Leo]

All you really need to do is upload this image in Customizer > Site Identity: https://s26.postimg.org/6tpxr88zt/2017-09-02_1059.png

Set header alignment to center: https://docs.generatepress.com/article/header-layout/

Then change the header background color to match the same as the logo background color.

[Author]

Posts