Max mega menu sub menu how to make persistent

Hi maxmegauser,

I’m not sure if this will be possible, but I’ll take a look. Please could you post a link to your site so I can see what you’ve done so far?

Regards,
Tom

website
Trying to make the second row stay there, same as this website
BBC news

• This reply was modified 4 years, 11 months ago by maxmegauser.

Hi maxmegauser,

Got it, thanks. It’s not possible to do it the way you are thinking sorry, our plugin is not designed to create that style ‘out of the box’.

To do it like the BBC you would need 2 separate menu locations, the current location that displays your main menu (like you have now), and a secondary location that displays the ‘sub’ menu. Then you can create multiple ‘sub’ menus and use the Conditional Menus plugin to change which menu is displayed depending on the page you’re looking at.

Regards,
Tom

Very useful point about conditional menus – the theme allows for a second menu there.

However I was just hoping to use a single menu that including a line of submenus rather than the full operation of the BBC site with conditional menus.
The single menu could be used as the Hamburger menu on mobiles too.

I have been looking at various sticky menu options without any luck!

I dont mind adding some CSS to make the second line sticky

Hi maxmegauser,

If you ‘hack’ the CSS I think you will run into more issues (the “open” menu not closing when another is opened, the sub menu closing itself if you hover over the parent item again, the sub menu covering the page content and probably more that would come to light as you head down that path) – in short it’s just not meant to do that style of menu.

Using 2 menus is the only way I can think to do it somewhat reliably, but as you say, you do have the mobile menu to think about then.

Regards,
Tom

Thanks – I tried conditional menus.
When Max Mega Menu decides the responsive hamburger menu should be selected (600 pixels) could it select an alternate menu?

Hi maxmegauser,

It can’t (it is exactly the same menu HTML, just styled differently with media queries). You can however use the “Hide on desktop” and “Hide on mobile” options on the menu items. Using those options you can effectively have 2 sets of menu items within the same menu structure – one set that only appears on desktop and another that only appears on mobile (or a combination of both, if you prefer).

Regards,
Tom

Thanks Tom
I tried that but I dont think the theme likes having two menus as primary at that location with one selectable vs the other as the desktop/mobile menu.

Conditional menus works in that they are persistent but very commplicated setting up sub menus.

Max maga menu still looks like the better starting point.
The theme has a secondary menu below the primary menu which can act as a placeholder for the sub menus and they both disappear on mobile.

Updated using just Max Mega Menu -check the second dropdown from the right to see how it brings up a set of 6 columns in a sub menu.
Is there a way not to have fixed column widths for this, so each sub menu item is only the width of the words?
If it can be made persistent that would be great ??

Hi maxmegauser,

Please see my earlier replies r.e. making it persistent.

To remove the widths from the sub menu please go to Mega Menu > Menu Themes > Custom Styling and add the following:

@include desktop {
    #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-columns-1-of-6 {
        width: auto;
    }
}

Regards,
Tom

• This reply was modified 4 years, 10 months ago by megamenu.

Thanks Tom – that worked – thanks!
We have a conflict with the theme where the crossover to mobile menu occurs.
I’ve set Max mega menu >menu themes > mobile menu responsive breakpoint to 768px allegedly the same as the theme.

However on narrowing the width of the screen towards the beakpoint, Max kicks in first deleting menus and placing the hamburger in both primary and secondary menu lines.
Narrowing the width further, the theme takes over deletes the secondary menu line and introduces a title line where it would normally place the hamburger.
All good fun.
How to make both work together with the same breakpoint and end up with the Max Mega hamburger in the title line?

Hi maxmegauser,

The responsive breakpoint of your theme seems inconsistent, on smaller screens the “Gloucestershire Ramblers” text appears at 767px, other elements seem to show/hide at 769px, which is why you’re seeing inconsistencies.

Please go to Appearance > Customize > Additional CSS and add the following:

@media (max-width: 769px) {
	#secondary-menu-wrap {
		display: none !important;
	}
	.navbar-header {
		float: left;
	}
	.navbar-collapse {
		float: right;
	}
}

Then under Mega Menu > Menu Themes > Mobile Menu, set the Toggle Bar Height to 50px, the background to Transparent, and enable the “Force Full Width” option for the sub menu.

Regards,
Tom

The theme gave me some css to remove that title text on mobile at 767px – can you remove it from your post please.
I changed the mobie breakpoint on Max mega menu to also be 767px.
That seems to have worked without using your css above
I tried changing background to transparent but didnt like it
I carried out the 50px toggle bar height and the force full width.
All looks great ??
I’ve chosen values for the menu items so they dont extend onto a second menu line.

Hi maxmegauser,

I can’t edit my posts sorry, they only give you a certain amount of time.

I’ve checked your site – looks good now ??

Regards,
Tom