Docs

[nicknomi]

Hi,

I started using Ubermenu when it came bundled with a previous version of X. Now, my Menu has broken and the Ubermenu editor doesn’t seem to respond to any edits – from colour to everything in between and my css changes.

I used the following CSS to make my menu across all devices the mobile menu – so I had the expandable bars that are usually on mobile. Now the menu is expanded and I can’t get it to change.

nav.x-nav-wrap.desktop {
    display: none;
}

a.x-btn-navbar {
    display: block;
    float: right;
}

.x-nav-wrap.mobile.collapse.in {
    display: block;
}

It shouldn’t be expanded at all and was working perfectly until the X update today!

See: http://www.europeisourplayground.com/

The menu should not be collapsed and the ugly boxing and grey colour were not there before (and don’t respond to edits such as making transparent). The mobile menu is also broken and is much smaller than it was before (I’ve no idea why as everything on the backend appears to be the same).

Can you help?

Thanks,

Nick

Edit:

I’ve just checked and I think that Ubermenu is now taking information from the Main UberMenu configuration tab rather than my custom Menu tab – and i can’t change that. It’s taking stylistic changes from there anyway. Everything else is still broken though – custom CSS for the menu no longer seems to work.

[nicknomi]

This reply has been marked as private.

[Rue Nel]

Hello Nick,

Thanks for the updates! Cornerstone 1.3.0 is now available in automatic updates! This release contains hotfix for several issues so be sure to check out the changelog. Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

[nicknomi]

Hi,

Everything on my site is up to date – including Cornerstone. When I updated X it broke my Menu. My menu is still broken.

From looking it seems the problem is definitely with Ubermenu. When I disable Ubermenu – my CSS override works and I have my mobile menu back across all devices.

(My main menu was set to behave as a mobile menu across all devices using the CSS above. The CSS no longer works and my menu is always expanded.)

Ubermenu now only reacts to changes made in the Main UberMenu configuration tab – it ignores my custom menu configuration and when I try to turn off the integration in Main Menu configuration, it doesn’t work. When I save it – the screen refreshes and the box to integrate with the main menu is ticked again – please see attachment ubermenu.png – the tick box in the image does not stay un ticked.

The main issue though is getting the menu to behave exactly as before – so getting it to register the CSS change as before and act as a mobile menu across devices. See attachment menu.png – this is how the menu should look and when expanded it should then have the items out as it does now: http://www.europeisourplayground.com

Waiting for your reply.

Thanks,

Nick

Edit: Caching is not the issue. I only use Cloudflare and when I do any edits I put it into Developer mode.

[nicknomi]

Re-attached menu.jpg here.

[Christopher]

Hi there,

Please add this CSS:

@media screen and (min-width: 959px){
.ubermenu-responsive-toggle, .ubermenu-sticky-toggle-wrapper {
    display: block;
}

.ubermenu-responsive-default.ubermenu-responsive.ubermenu-responsive-collapse {
    max-height: 0;
    overflow: hidden!important;
    visibility: hidden;
}

.ubermenu-responsive-default.ubermenu-responsive {
    width: 100%;
    max-height: 500px;
    visibility: visible;
    overflow: visible;
    -webkit-transition: max-height 1s ease-in;
    transition: max-height .3s ease-in;
}
.ubermenu-responsive-default.ubermenu-responsive.ubermenu {
    margin: 0;
}
}
@media screen and (min-width: 960px){
.ubermenu-responsive-default.ubermenu {
    display: none !important;
}
}

Hope that helps.

[nicknomi]

Hi Christopher,

Thanks for trying to help.

It gets the mobile menu back but the expand button is tiny. Any way to get it to the same size as before – so same as the screenshot above?

I’ve attached a screenshot of the results so you can see what I mean.

Thanks,

Nick

edit:

It also stops my transition. The menu currently shifts down a little when you scroll – which I want to keep.

[Christopher]

Hi there,

Please implement previous code so we can see the transition.
Add this code as well :

a.ubermenu-responsive-toggle {
    font-size: 50px;
}

Hope it helps.

[nicknomi]

Hi Christopher,

I think we’re getting there. The transition is fine actually – sorry about that.

However – now the menu doesn’t open. I have left the code implemented so you can test. I added:

color: rgb(255,255,255);

but tested it with and without but the menu still doesn’t expand. I also removed my original code:

nav.x-nav-wrap.desktop {
    display: none;
}

a.x-btn-navbar {
    display: block;
    float: right;
}

.x-nav-wrap.mobile.collapse.in {
    display: block;
}

Which I assume was the intent? But again tried it with and without and the menu doesn’t expand either way. All the settings in Ubermenu are the same as they were before. Hope you know the problem.

Thanks,

Nick

[nicknomi]

Hi,

Any update on this? Sorry to rush it’s just I have left the code implemented as requested and the menu is now unusable on desktop-size screens….

I assume it’s something to the do with the media size section of the code but when I simply delete/lower it I get a very ugly result. The menu expands in clunky segments.

Thanks,

Nick

[Rue Nel]

Hello Nick,

Thanks for getting back to us! Could you remove the given css from our previous reply since it just give conflict with the desktop menu. And then we will re check your site. And please do not forget to purge your site cache since you are also using Varnish and keep your CloudFlare to development mode.

Please let us know how it goes.

[nicknomi]

Hi,

Thanks. I have removed the code which takes the website back to an always expanded menu.

I’ve purged with Varnish and switched back to Developer mode in Cloudfare.

Hope you can find a solution.

Also – any idea why this is happening? Seems that the update has created several problems with UberMenu.

Thanks,

Nick

[Rue Nel]

Hello Nick,

Please make use of this code:

.ubermenu-responsive-toggle, .ubermenu-sticky-toggle-wrapper {
    display: block;
    font-size: 26px;
}

@media screen and (min-width: 959px){
  .ubermenu-responsive-toggle, .ubermenu-sticky-toggle-wrapper {
    display: block;
    transition: all .3s ease-in;
  }

  .ubermenu-responsive-default.ubermenu-responsive.ubermenu-responsive-collapse {
    max-height: 0;
    overflow: hidden!important;
    visibility: hidden;
  }

  .ubermenu-responsive-default.ubermenu-responsive {
    width: 100%;
    max-height: 500px;
    visibility: visible;
    overflow: visible;
    -webkit-transition: max-height 1s ease-in;
    transition: all .3s ease-in;
  }

  .ubermenu-responsive-default.ubermenu-responsive.ubermenu {
    margin: 0;
    transition: all .3s ease-in;
  }
}

We would loved to know if this has work for you. Thank you.

[nicknomi]

Hi,

That seems to have done the trick! Thanks very much. One thing though – the transition seems a little clunky. I tried making some edits to the code but nothing I do (both with CSS and the settings in Ubermenu seem to make a difference) the image elements of the menu seem to lag behind the rest (even after loading).

Also – in Ubermenu I have the Main Configuration Tab and then my own custom europeMainMenu tab. Since the update however I haven’t been able to use the EuropeMainMenu settings for my main menu.

The automatic integration for the Main configuration tab can’t be turned off. I either have to have it set to my main menu or my footer menu. I don’t want it as either. I’ve copied the settings across for now but even when I make an entirely new configuration tab – it won’t work if it’s set to the same configuration as the main menu! Sure some kind of bug/ issue?

Thanks,

Nick

[Rad]

Hi Nick,

Looks fine on my end, it’s the container of the images that do the animation, and not the image. The CSS doesn’t have any relation to the images, hence, it will not be affected by the effect. If I misunderstood it, then please provide a video recording of your menu issues.

Thanks!

[Author]

Posts