Mega Menu resetting

Hi diriras,

The CSS you would need to use would be:

@media only screen and (max-width: 1142px) {
    #mega-menu-wrap-header-menu .mega-menu-toggle + #mega-menu-header-menu {
        background: #182f4c;
        padding: 0px 0px 0px 0px;
        transform: translate(0%, 50%);
        display: inline-flex;
    }
}

(Only override the CSS for the rules you require, so that might only be the “display” rule(?))

When you say it is “resetting”, do you mean the menu structure on the Appearance > Menus page? If so you may be running into the WordPress Menu Item Limit:

https://www.megamenu.com/documentation/menu-item-limit/

Regards,
Tom

Hello,

1.Thank you four your post, indeed I forgot to put the {} strings in CSS code, so I was getting the error.

The CSS code is correct now and I am viewing the correct results except when I am pressing one of the menus to expand, all the menu bar is suddenly drops down and in parallel the menu is expanding the mega submenus, this one I do not know how to fix it.

2. As far as the menu resetting to the default settings, I ‘ve managed to overcome this by creating a new Menu and put hte setting one by one again.

The only real problem that needs fixing is the CSS menu below max-width: 1142px

@media only screen and (max-width: 1142px) {
#mega-menu-wrap-header-menu .mega-menu-toggle + #mega-menu-header-menu {
background: #182f4c;
padding: 0px 0px 0px 0px;
transform: translate(0%, 50%);
display: inline-flex;
}
}

Also i noticed that after the CSS code applied,when I hover the menus items in full screen it auto expand to mega menu successfully as they should but below 1142px it is not it just drops down the whole menu down.

this is the url:
https://www.sportlive.gr

and this is a pic of the error:
https://ibb.co/zrhc6XJ

Best Regards

Hi diriras,

I think that must be an issue with your custom CSS, as the menu works as expected when it is removed:

@media only screen and (max-width: 1142px) {
    #mega-menu-wrap-header-menu .mega-menu-toggle+#mega-menu-header-menu {
        background:#182f4c;
        padding: 0 0 0 0;
        /* transform:translate(0%,50%); */
        /* display:flex */
    }
}

If you are simply trying to display your desktop style menu on mobile, then remove any custom CSS and go to Mega Menu > Menu Themes > Mobile Menu and set the Responsive Breakpoint to 0px.

Regards,
Tom

Hello,

No I am not trying to do that.

If you visit my website https://www.sportlive.gr now that I have remove all custom CSS, you will see that after I installed Mega Menu and applied to my theme, it sat above my theme Logo, that is why I am trying to overcome this with custom CSS.

This is the custom CSS code I came up with after many tries.

@include desktop {
#{$wrap} {
max-width: 55%; /** width in pixels or percent **/
margin: 0 auto; /** center align menu **/
transform: translate(0%, 50%);
display: inherit;
padding: 0px 0px 0px 0px;
}
}

@media only screen and (max-width: 1142px) {
#mega-menu-wrap-header-menu .mega-menu-toggle + #mega-menu-header-menu {
background: #182f4c;
padding: 0px 0px 0px 0px;
transform: translate(0%, 50%);
display: inline-flex;
}
}

But it is not working well in responsiveness, you can see it when you try to reduce the webpage width with chrome.

If you now how to overcome this problem either with setting changes in MEga Menu or Custom CSS code I am happy to read you.

Best Regards,

Of course I have read your Theme Integration Guides and since my https://www.sportlive.gr theme in newspaper Tagdiv I put the below custom CSS and I have disabled the Mobile Toggle Bar in Mobile Settings.

@media (max-width: 768px) {
#mega-menu-wrap-header-menu {
display: none;
}
#td-mobile-nav #mega-menu-wrap-header-menu {
display: block;
}
}

Any further help i much appreciated.

Hi diriras,

Ok, leaving your site as it is:

1. Go to Mega Menu > Menu Themes > Custom Styling and add the following:

@include desktop {
    #{$wrap} {
        float: left;
    }
}

That should stop the menu overlapping the logo.

2. Go to Mega Menu > Menu Themes > Mega Menus and set the Panel Width (Outer) to:

.td-header-menu-wrap

That should make your sub menus the same width as your page content.

3. Go to Mega Menu > Menu Themes > Menu Bar and set the Menu Height to 80px. That will vertically center the menu in your header.

Regards,
Tom

Hi Tom,

Yeap, it is working perfect now thank you for your precious help,

Best Regards

Michael

Hello Tom,

Unfortunately , the issue of menu resetting is continuous.
After a hole day of all working fine, suddenly approximately the same night hour after 23.00 every day, I’ve got my main menu in a mess. When I go into word press menu I see my menu items some not even there some in the wrong order ant is is totally frustrating.

Because my menu is complicated I have to do the same time every evening to restore the DB to a previous working day. I do not know what else do to as i cannot export the whole menu setting from wordpress and mega menu it is not easy needs customizing again, I want to ask if anyone came in a situation like this?

BR

Michael