Submenu Alignment

Support
#1

Hello,
I seem to be going round in circles trying to fix the submenu alignment issues.

This is the current layout:

As you can see the spacing of the main menu is distorted when I select the dropdown for the submenu. Moreover the masthead (navigation) automatically expands which I don’t want. This should overlap…this is the result I am looking for:

In the above image, the red arrow indicates that I want to add some spacing between main navigation heading and the sub menu.

Test website is: http://managetopia.apps-1and1.net/

How can I achieve this?

Really appreciate your assistance on this matter.

Many thanks,
Cara

#2

Update…
I have activated the UberMenu extension.
I’m battling with the setup of the menu. Also, currently encountering style and positioning problems.
I don’t find their tutorials and documentation very intuitive. I’ll look at it again in the coming days.
Also, I will check other threads here in the forum.

Do you have any documentation in the Apex (X-Theme) Knowledge Base that you can recommend?

Many thanks again,
Cara

#3

Hi Cara,

Please check the documentation here:

Hope this helps.

#4

Hi Jade,
Thanks for your reply. I have since setup the Ubermenu with Flyout submenus.

I have a couple of issues where I need your assistance…For the past couple of hours I have tried with different selections and CSS editing to resolve these, but no success. Also, I couldn’t find any threads in the forum listed with these or similar issues.

  1. Alignment of the navigation, incl. logo is now left aligned in the container. I need to have this centered aligned, incl. logo. It appears to be a page width issue, or issue lies with the WPML language switcher. Alternatively, old CSS conflict, which I needed for old standard menu setup? Tried to correct, but no success.
  2. Search icon alignment: listed on second line, center aligned. This needs to be listed beside the language switcher (fixed for desktop) - No wrap for Main / Primary menu
  3. Search icon style: where can I change the icon color to white. Orange should only be displayed on hover?

Below screenshot highlights all 3 issues listed above:

  1. WPML language switcher: where can I adjust the positioning, so the flags are listed underneath each other?
    Current layout:

This is how it should be displayed:

Here is the beta website URL again: http://managetopia.apps-1and1.net/

Hope you can help with the above.

Appreciate your assistance.

Many thanks,
Cara

#5

Hi Cara,

1.) To center entire menu bar, see this: http://sevenspark.com/docs/ubermenu-menu-bar-positioning under Centering. Please note that current setup enables the logo and ubermenu bar to display on the same line. Centering will hide the logo: https://screencast-o-matic.com/watch/cbQIiDI27O

2.) & 3.)That is the default search icon for X theme menu. Since your using Ubermenu, disable that feature from theme options and then enable search functionality instead that is available on Ubermenu: http://sevenspark.com/docs/ubermenu-3/content/shortcodes/search

4.) Language Switcher > See this guide: http://sevenspark.com/docs/ubermenu-3/settings/submenu/position

Hope this helps.