Ubermenu in Pro Header - Submenu Overlays ANother Container

[MaxKirsten]

Hi,

I have an Ubermenu in my Pro header. Each screen size has its own menu layout. Below the tablet and mobile menus are Cart, Login and Search icons.

The mobile and tablet versions of the menus (i.e. mobile responsive menus) have an issue I cannot rectify. When I open the submenu, it overlays the Cart/Search bar, leaving it in the middle of the menu. An example is if you open MENU > Hypnosis NLP Downloads on a mobile device (all details in a Secure Note.

Do you know if the Cart/Search bar can be pushed down the screen as it does when just MENU is tapped?

Thanks,
Christopher

[friech]

Hi Christopher,

Thank you for writing in, please inspect the Container where your mobile cart/user/search icons are placed, add this to that Container’s Element CSS area

$el.x-bar-container {
	z-index: 2;
}

More details about CSS z-index property

Happy New Year,
Cheers!

[MaxKirsten]

Hi Friech,

I am afraid that did not work. The container with the icons remains mid-menu when the sub menu is expanded (see screenshot - tested with cahing plugin deactivated). Any other ideas?

Thanks and happy New Year,
Christopher

[friech]

Hi Christopher,

In that case, please provide us login credentials in a secure note so we can take a closer look.

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

Thanks,

[MaxKirsten]

The Secure Note was in the first post, but is attached again here.

[ruenel]

Hello Max,

You are experiencing this issue because your z-index of the container with the Ubermenu should be higher than than z-index of the container of the social icons. I have swap the z-index to resolve your issue.

Container: 1

$el.x-bar-container {
	z-index: 2;
}

Container 2:

$el.x-bar-container {
	z-index: 1;
}

Check your site now.

[MaxKirsten]

Hello RueNel,

That has resolved the problem. Thank you! I realise now that the submenus on mobile devices slide out over the top level menu, rather than pushing all lower menus down the page. The Z index makes total sense now.

Thanks again,
Christopher

[christian]

We’re glad that your issue is now resolved, Christopher.