Remove UberMenu [Column] in Pro Headers

Hey,

I’m making a custom PRO Header with an UberMenu navigation.

The problem is that the navigation includes UberMenu elements like [Column]. See here:

These [Column] come from here:

Do you have a solution?

Cheers

Hello Frederik,

Thanks for writing in!

If you are using uberMenu, please DO NOT use the navigation collapse or navigation layered and load the menu. You will need to use the content area off canvas and use the ubermenu shortcode inside the element instead. You can check this documentation to know how you can use the ubermenu shortcode:

Hope this helps.

Hey,

Gotcha! I’ve now done as you wrote - adding the UberMenu shortcode.

However, it doesn’t look as expected.

Check this. When clicking on the menu, it looks good at first:

However, when clicking on the Top Link with Sub Menus (in the case “Møbler”), it looks weird:

I want “Møbler” to only show the Top Links below, which would be “Stole” and “Borde” (the ones in bold on the second image). Then, the user should be able to click on either of these two menu points to get the final set of links (the ones without bold on the second image).

Actually this is the feature of the Standard Pro Header navigation.

Do you have any recommendations?

(and let me know if I need to explain more clearly)

Cheers

Hey Frederik,

​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Hey,

A secure note has been added with Wordpress login.

Cheers

Hi Frederik,

You only need to add Ubermenu once in a Content Area element, it has its own responsive feature and you don’t have to add another one within a Content Area Off Canvas just for the mobile element. And that setup has no relation to Pro header navigation’s standard.

Your Ubermenu appears like that since it’s configured that way. And it’s because it’s a megamenu group by column element, where Stole, Borde, Sofaer, Senge are column header and not as a parent menu item.

Try changing it to Automatic and test it again.

Thanks!

Hey Rad, thanks for the reply.

I tried changing the four Parent Menu Items to “Automatic” but the menu still looks bad on mobile.

Looking at the Menu setup backend, I can confirm that the Menu Items are Parents:

On mobile, I want the children of these four parents to only show after the parent is clicked. Right now, the whole menu (both parents and all children at once) are shown:

Hi Frederik,

It is parent menu, but it’s set as header in Ubermenu. Please check the screenshot that I have provided before

It’s set as Header, and that’s how Ubermenu works regardless of the hierarchy of the items in Appearance > Menus. So the only way to make it behave as a normal parent menu is turning it on to Automatic or Normal instead of Header. But yes, it will display differently and unfortunately, it’s Ubermenu limitation.

Thanks!

Hey,

I’ve already changed it to automatic, but it doesn’t change anything on the menu:

Hi Frederik,

It looks like regardless of the setting, it will be displayed like that since it’s configured as mega menu and some features are inactive due to selected skin.

Looks like you’re have to use standard collapse menu on mobile, then Ubermenu on desktop. Could you try that?

I also tried checking the Ubermenu’s mega menu if I can disable it on mobile but not finding any, please check this https://sevenspark.com/docs/ubermenu-3/responsive. Please try starting with the default Ubermenu skin than none.

And are you currently working on your site, there is now two header bar and menu items increased.

Thanks!

Hey Rad,

My bad, I shouldn’t have worked on the menu while you were looking into it, too.

I’ll try to work it out my self for now and see if I can find a solution.

Since we talked, my Product Archive pages have lost their Archive titles and subtitles. See for yourself here:

(It should be above the products on this page)

Do you know what this could be caused?

Cheers

Hi Frederik,

Sure, please let us know about the menu.

And for the product archive, I’m not sure what was there. But with Integrity stack, the place where archive title and description is called landmark. And landmark isn’t available in Pro where custom header is active. And with that, you have to create your own landmark as Pro header bar with the help of headline element. Please check this https://theme.co/apex/forum/t/landmark-header-in-pro/16384/9

Thanks!

Oh okay. So I can’t have archive titles and Pro Header at the same time? :slight_smile:

Hi Frederik,

With available options, yes not possible. But still doable by adding a shortcode to the text element of your header bar. Example, please add this code to your child theme’s functions.php

add_shortcode('my_landmark', 'my_landmark');

function my_landmark ($atts) {
ob_start();

x_get_view( 'integrity', '_landmark-header' );

return ob_get_clean();
}

Then simply add [my_landmark] to your header bar’s text element.

Thanks!

Hey Rad,

Awesome, I might use this solution later.

For now, I’ve decided not to go with Pro Header solution. I still can’t get the UberMenu to become responsive like I want.

To better illustrate what I want to achieve, here’s an example:

In the example menu below, how do I make A2, A2, A3 and B1, B2, B3 only visible when either A or B, respectively, is clicked?

[Top Link]

  • [A]
    – [A1]
    – [A2]
    – [A3]
  • [B]
    – [B1]
    – [B2]
    – [B3]

Best regards

Hi Frederik,

I tried it as well and it’s not gonna work as standard sub-menu due to the column item. What you could do is having two set of menu and hide 1 set from mobile, then hide another from desktop. Example,

[Top Link]
[Ubermenu Row] << hide this from mobile
[Ubermenu Column]

  • [A] << set it as header item
    – [A1]
    – [A2]
    – [A3]
    [Ubermenu Column]
  • [B] << set it as header item
    – [B1]
    – [B2]
    – [B3]

[Ubermenu Row] << hide this from desktop (no columns)

  • [A] << set it as normal parent menu
    – [A1]
    – [A2]
    – [A3]
  • [B] << set it as normal parent menu
    – [B1]
    – [B2]
    – [B3]

Hope this helps.

Hmm could work.

Is it possible to have these two menus in two seperate menus in Wordpress backend?

It’s really hard to duplicate my menu structure because it’s really big. On the other hand, I have a plugin to quickly duplicate the whole menu to a new one

Hello Frederik,

Regretfully you cannot separate your a menu into two menus. If you do so, then you will need two menu toggles or need to display each menu separately.

If your two menus you mentioned has the same menu item contents but a different layout structure then you can separate them. You can then show/hide the menu for different screen sizes as suggested by Rad in his previous reply.

Hope this helps.

Hey Rad,

Hope you’re doing good.

I’ve duplicated your suggestion now, but it still doesn’t look as intended on mobile. Right now, it looks like this:

As seen on the image, the parent category and children are both shown. I need the children to only show when the parent is clicked.

The settings look like this:

As seen on this image, the parents (i.e. “Stole”) are set as parent menu items since the item below (the children) are indented.

I’ve created a new menu “Shop Menu v3”. If you want to test out, you can do it on this new menu.

Cheers

Hey Frederik,

The header currently in use in your site is the Classic Header and it’s not possible to have different menus in there like what Rad has suggested.

How about you setup a Pro header and use UberMenu for desktop and hide it in mobile and use a Navigation Collapsed element for mobile? This is to avoid having to setup 2 UberMenus. The Navigation Collapsed will work like what you describe out of the box.

Thanks.